6 ms·

PSA: the best way to enable Microformat-like stuff with almost no effort is to keep describing content with reasonable class names even if you never pay any spe

by cxr 4y ago

PSA: the best way to enable Microformat-like stuff with almost no effort is to keep describing content with reasonable class names even if you never pay any special attention to the microformats.org standards. One unfortunate side effect of things like Tailwind CSS is that some folks with a single-minded focus on looks are now using only the Tailwind class names, but you can do both. If before you'd have written something like class="video-thumbnail" and styled the content with a class selector in your CSS, but now you've adopted Tailwind and have excised all the descriptive class name from the content (rather than just rming your stylesheet and adding Tailwind classes to whatever class names are already there), then please put the descriptive class names back in! And if you have colleagues submitting patches that remove class names because you're migrating to Tailwind, tell them to use Tailwind classes in a way that adds to the classification instead of as a replacement for traditional, descriptive class names. (A similar thing happens with CSS compilers. The autogenerated stuff served up on podcasts.google.com is nasty, for example.)

firecall 4y ago
You could probably just chuck those class names in declaration anyway, even they werent attached to any styles! Of course, having well considered structured semantic works very well! For instance, with images, you can use attached caption markup to describe an images purpose and reference it in the written body of the document.
a-priori 4y ago
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
  > 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...?)
solardev 4y ago
Is there any evidence this matters at all?
- cxr 4y ago
  Aside from, uh, being affected by it? I don't know what "matters" means to you.
  - solardev 4y ago
    Matters how? Microdata seems irrelevant to begin with, ignored by search engines or anything else (at least in my limited tests), and faking it with semi-semantic class names alongside auto generated ones will do what, exactly? Like, what is this additional data layer actually for? What humans or software use it?
    - cxr 4y ago
      > Matters how? I don't know. That's your word. You're the one who wrote it. I'm asking you. > faking it with semi-semantic class names Huh?
      - solardev 4y ago
        I mean why go through all this effort at all?
        cxr 4y ago
        You're going to have to put more effort communicating that you've thought about what you're asking (including effort in laying out what you're even asking) if you expect any effort to be put into a response. Of your three comments here, two out of three are (ambiguous) one-liners, and three out of three come off like you took all of 10 seconds to bang them out before hitting the "reply" button. Even if that happens, I'm past 50/50 on the question of "is this even worthy of further engagement?" at this point. (It's pretty much at a 100% "no".)
quickthrower2 4y ago
Or you can spit out the important stuff from the state (or model) as JSON and chuck that in a div?
lloydatkinson 4y ago
> One unfortunate side effect of things like Tailwind CSS is that some folks with a single-minded focus on looks are now using only the Tailwind class names, but you can do both. If before you'd have written something like class="video-thumbnail" and styled the content with a class selector in your CSS, but now you've adopted Tailwind and have excised all the descriptive class name from the content Are you really suggesting that people should make Cascading Style Sheets do more than styling? We have literal entire specs for using correct attributes for accessibility and microformats. WAI, ARIA, and so on. Furthermore, from the authors of Tailwind, Headless UIhttps://headlessui.com/ https://headlessui.com/ is a collection of fully unstyled logic components with their primary concern being accessibility (done correctly, with aforementioned attributes, not random class names). At no point have users or maintainers of Tailwind tried to steer people away from including accessibility or microdata in their designs. This feels like an incredibly thinly veiled attack on Tailwind by the ever vocal anti-Tailwind interest group for something it shouldn't be doing anyway.
- cxr 4y ago
  > Are you really suggesting that people should make Cascading Style Sheets do more than styling? No. I'm talking about the class attribute, not style sheets. The single-minded minded Web developers with a focus only on styling that I mentioned seem to have formed the belief that class names are just "a CSS thing" (or something)—and that's the problem. > At no point have users or maintainers of Tailwind tried to steer people away from including accessibility or microdata in their designs. K. Who're you arguing with you here? > This feels like an incredibly thinly veiled attack on Tailwind by the ever vocal anti-Tailwind interest group Consider that leaping to conclusions like this indicates that you might be living in a bubble. (See "single-minded focus".) I'm not part of some rival frontend gang. I don't even exist in the milieu—the world is way bigger than visual designers doing Web work who spend their discretionary time talking about the trade.
  - lloydatkinson 4y ago
    > The single-minded minded Web developers with a focus only on styling Again with the attacks. There is no evidence that eg Google uses arbitrary class names in order to index metadata over the accepted standards of microdata. https://developers.google.com/search/docs/advanced/structured-data/product https://developers.google.com/search/docs/advanced/structure... Given I know what microdata is, when to use it, and how it's different to CSS, I'm not sure what bubble this would be. Perhaps the one that is familiar with Google crawling?
dikaio 4y ago
This is the first time I’ve heard of css classes used as a substitute for micro format data, do you have a reference for that? Also, from my understanding microformat really isn’t being used much anymore and the preferred method nowadays is json-ld.
- cxr 4y ago
  > css classes There's no such thing. There are already detailed comments in this thread about this mixup.

by cxr 4y ago

firecall 4y ago

You could probably just chuck those class names in declaration anyway, even they werent attached to any styles! Of course, having well considered structured semantic works very well! For instance, with images, you can use attached caption markup to describe an images purpose and reference it in the written body of the document.

a-priori 4y ago

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
> 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...?)

solardev 4y ago

Is there any evidence this matters at all?

cxr 4y ago
Aside from, uh, being affected by it? I don't know what "matters" means to you.
- solardev 4y ago
  Matters how? Microdata seems irrelevant to begin with, ignored by search engines or anything else (at least in my limited tests), and faking it with semi-semantic class names alongside auto generated ones will do what, exactly? Like, what is this additional data layer actually for? What humans or software use it?
  - cxr 4y ago
    > Matters how? I don't know. That's your word. You're the one who wrote it. I'm asking you. > faking it with semi-semantic class names Huh?
    - solardev 4y ago
      I mean why go through all this effort at all?
      - cxr 4y ago
        You're going to have to put more effort communicating that you've thought about what you're asking (including effort in laying out what you're even asking) if you expect any effort to be put into a response. Of your three comments here, two out of three are (ambiguous) one-liners, and three out of three come off like you took all of 10 seconds to bang them out before hitting the "reply" button. Even if that happens, I'm past 50/50 on the question of "is this even worthy of further engagement?" at this point. (It's pretty much at a 100% "no".)

quickthrower2 4y ago

Or you can spit out the important stuff from the state (or model) as JSON and chuck that in a div?

lloydatkinson 4y ago

> One unfortunate side effect of things like Tailwind CSS is that some folks with a single-minded focus on looks are now using only the Tailwind class names, but you can do both. If before you'd have written something like class="video-thumbnail" and styled the content with a class selector in your CSS, but now you've adopted Tailwind and have excised all the descriptive class name from the content Are you really suggesting that people should make Cascading Style Sheets do more than styling? We have literal entire specs for using correct attributes for accessibility and microformats. WAI, ARIA, and so on. Furthermore, from the authors of Tailwind, Headless UIhttps://headlessui.com/ https://headlessui.com/ is a collection of fully unstyled logic components with their primary concern being accessibility (done correctly, with aforementioned attributes, not random class names). At no point have users or maintainers of Tailwind tried to steer people away from including accessibility or microdata in their designs. This feels like an incredibly thinly veiled attack on Tailwind by the ever vocal anti-Tailwind interest group for something it shouldn't be doing anyway.

cxr 4y ago
> Are you really suggesting that people should make Cascading Style Sheets do more than styling? No. I'm talking about the class attribute, not style sheets. The single-minded minded Web developers with a focus only on styling that I mentioned seem to have formed the belief that class names are just "a CSS thing" (or something)—and that's the problem. > At no point have users or maintainers of Tailwind tried to steer people away from including accessibility or microdata in their designs. K. Who're you arguing with you here? > This feels like an incredibly thinly veiled attack on Tailwind by the ever vocal anti-Tailwind interest group Consider that leaping to conclusions like this indicates that you might be living in a bubble. (See "single-minded focus".) I'm not part of some rival frontend gang. I don't even exist in the milieu—the world is way bigger than visual designers doing Web work who spend their discretionary time talking about the trade.
- lloydatkinson 4y ago
  > The single-minded minded Web developers with a focus only on styling Again with the attacks. There is no evidence that eg Google uses arbitrary class names in order to index metadata over the accepted standards of microdata. https://developers.google.com/search/docs/advanced/structured-data/product https://developers.google.com/search/docs/advanced/structure... Given I know what microdata is, when to use it, and how it's different to CSS, I'm not sure what bubble this would be. Perhaps the one that is familiar with Google crawling?

dikaio 4y ago

This is the first time I’ve heard of css classes used as a substitute for micro format data, do you have a reference for that? Also, from my understanding microformat really isn’t being used much anymore and the preferred method nowadays is json-ld.

cxr 4y ago
> css classes There's no such thing. There are already detailed comments in this thread about this mixup.