Hacker News Reader

Comment by chrisoverzero | Hacker News Reader

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-attri...

View on HN

What 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.

Describing 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.

As 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`.

A 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.

Accessibility for disabled users count?

User 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.

No, you should be using ARIA attributes, such as `aria-role` for this where it cannot be inferred by the element's tag name.

That ship has already sailed if you're using Tailwind though.

No 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.

Solution: don't use Tailwind.

Reply on news.ycombinator.com