5 ms·

I'd argue that using the `class` attribute for describing the content of a field is overloading it, and that it should only be used for linking to CSS styles.

I'd argue that using the `class` attribute for describing the content of a field is overloading it, and that it should only be used for linking to CSS styles. You're better off using another attribute, e.g. some data-* attribute, for semantic information.

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 ago
  That ship has already sailed if you're using Tailwind though.
  - lawtalkinghuman 4y ago
    Solution: don't use Tailwind.
  - cxr 4y ago
    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.
- colonwqbang 4y ago
  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.
  - kitd 4y ago
    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.
    - a-priori 4y ago
      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`.
      - cxr 4y ago
        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.
  - indymike 4y ago
    Accessibility for disabled users count?
    - 4y ago
cxr 4y ago
> I'd argue that using the `class` attribute for describing the content of a field is overloading it 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...?)

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 ago
That ship has already sailed if you're using Tailwind though.
- lawtalkinghuman 4y ago
  Solution: don't use Tailwind.
- cxr 4y ago
  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.
colonwqbang 4y ago
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.
- kitd 4y ago
  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.
  - a-priori 4y ago
    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`.
    - cxr 4y ago
      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.
- indymike 4y ago
  Accessibility for disabled users count?
  - 4y ago

cxr 4y ago

> I'd argue that using the `class` attribute for describing the content of a field is overloading it 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...?)