You're better off using another attribute, e.g. some data-* attribute, for semantic information.
You're better off using another attribute, e.g. some data-* attribute, for semantic information.
> […] authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
[*]: https://html.spec.whatwg.org/multipage/dom.html#global-attri...
But describing the presentation of content isn't the sole purpose of the `class` attribute. Having meaningful domain-related names included in the class makes UI testing a lot easier.
You can, for example, use a `data-testid` attribute if the element can't be identified reliably with another attribute, such as the `id` or `role`.
As I said in my (earlier) response to you: using the "class" attribute for semantic, non-styling purpose is not "overloading" or misusing it. It is simply using it. (Just like the folks who developed CSS were able to get use out of element classes by baking tier-one support for them into their selector language. CSS has no claim to the right and proper use of an attribute that predates CSS.) To argue against this is revisionism.
The HTML5 data attributes also aren't a replacement for proper use of the class attribute, either. What the class attribute encodes (surprise) the class that the content belongs to. The data attribute payload encodes a particular value associated with a given key for a particular instance (e.g. the testid payload from your own example). And aside from the use cases being incomparable, the HTML spec says they shouldn't be used the way you're saying.
Accessibility help relies on using the correct, semantic tags, and when that is not possible, WAI-ARIA attribute hints.
It's as easy as:
<img class="video-thumbnail w-24 h-24 rounded shadow"[...]
... instead of swapping out "video-thumbnail" class name with the Tailwind stuff (replacing it). They are not mutually exclusive.You, like several others commenters seem to have an internalized belief (probably based on assumption/association?)* that content class names are a contribution of the CSS spec. (This is the only way to interpret your "overloading" remark.)
Just because you can use the classes in your CSS as selectors doesn't mean that classes are just a CSS "thing" (or whatever) and that doing something else with them is "overloading" them. That's silly. The class attribute is for, like, you know, specifying the class of the content.
* (This raises the question: Is the word "class" just an opaque token to people? They've never typed out the sequence 'c', 'l', 'a', 's', 's', '=' and pondered it at all? Or do they, but it's limited to something akin to, "If you want to put a border or something then you put 'class' here on the element and then you can CSS it. I dunno why they called it that, but that's what you write, and it lets you do the border later." What do they think of the fact that you can also create CSS selectors based on element ID? Are element IDs, then, another just-a-CSS-thing in their minds? Or what about that you can make selectors using the element name itself? Or that class selectors are not the default—if you want to use a class-based selector in a style rule, you actually have to escape from the default mode by using a leading dot to specify that what follows should be interpreted as a class name? If classes were strictly within the purview of CSS, shouldn't the class selector be the default...?)