Using data- HTML attributes instead of classes

by Andy Prevost

Sunday November 16 2025

Is it right?

Can you still call a framework classless if you use data- attributes? or "roll"? That would look like: <div data-grid> and <div roll="grid"> ....

I am going through the process of trying to create a CSS classless framework. I've got some great components already, including Hero, CTA, responsive Grid, Typography, horizontal Navbar, vertical Navbar ...

What surprised me the most in this exercise is the number of CSS classes I had used that were completely useless.

Once you identify the HTML tag that is the "wrapper" or "container", all else is really easy to create as classless.

There are exceptions, of course, Notably, buttons and utility classes. You can use data- attributes (or role, for that matter), but you won't be saving anything on file sizes.

So far, I have not been able to create work arounds for:

  • buttons
  • borders
  • helpers
  • spacing

I ended up writing the new classless Worx CSS with both the role and data- definitions. That means it's the developer's choice. It works with either "trigger".

What is important is that once the wrapper or container is identified as unique, the rest is without any classes at all.

If not obvious yet, my answer to the question is a resounding yes. Classless means it is not using any class. Role has an advantage in that it can be used as by the visually impaired. data- has the advantage in that the developer can create customization without a proliferation of classes, roles, or other HTML tags.

 

Next ▶

Post a Comment