4 ms·
The HTML Standard disagrees: > […] authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired p
by chrisoverzero 4y ago
The HTML Standard disagrees:
> […] 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-attributes:classes-2 https://html.spec.whatwg.org/multipage/dom.html#global-attri...
- nickcox 4y agoThat ship has already sailed if you're using Tailwind though.
- lawtalkinghuman 4y agoSolution: don't use Tailwind.
- cxr 4y agoNo it hasn't. As I said in my first comment, you can stuff your Tailwind selectors into the class list _and_ still put the content class annotations in the class attribute. 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.
- colonwqbang 4y agoWhat possible benefit can come from doing this, except to appease the standard writers? Describing the presentation of content is the sole purpose of CSS. I don't see why it should matter to anyone except the author herself what names are chosen for the presentation rules.
- kitd 4y agoDescribing the presentation of content is the sole purpose of CSS. 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.
- a-priori 4y agoAs I said in my parent comment, there's other attributes better suited to purposes like this rather than overloading the `class` attribute. 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`.
- cxr 4y agoA person might get the impression based on your comments that classes are somehow "for" CSS (they're not) and that using them for some non-CSS use is somehow "wrong" (it's not). Meanwhile almost everything you're saying here is opposite what the HTML spec says. 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.
- indymike 4y agoAccessibility for disabled users count?
- ElectricalUnion 4y agoUser agents usually don't have general artificial intelligence and often can't infer content intent from class names. Accessibility doesn't magically improve just because of classes. Accessibility help relies on using the correct, semantic tags, and when that is not possible, WAI-ARIA attribute hints.
- a-priori 4y agoNo, you should be using ARIA attributes, such as `aria-role` for this where it cannot be inferred by the element's tag name.