5 ms·

Mainly because it isn't semantic and breaks accessibility features. If you find yourself writing layouts like this you're probably ignoring a bunch of useful s

Mainly because it isn't semantic and breaks accessibility features. If you find yourself writing layouts like this you're probably ignoring a bunch of useful stuff like <aside> <article> <menu> etc. Unless you manually configure it yourself, screen readers won't know what's important to read, tabindex won't know where to jump around, and form fields won't know what values to offer.

zahlman 9mo ago
> isn't semantic It's certainly better than calling everything a div. > breaks accessibility features I don't know if I'd call it breakage to just... not use them where they should be used. Of course if a real tag exists that adequately matches the author's intent, that should be preferred over a made-up one.
- kevincox 9mo ago
  > It's certainly better than calling everything a div. It's not. For semantic purposes <my-element> is the same as <div class=my-element>. So on the surface they are equivalent. But if you are in the habit of using custom elements then you will likely continue to use them even when a more useful element is available so <my-aside> rather than <aside class=my-aside> so in practice it is probably worse even if theoretically identical. Basically divs with classes provide no semantic information but create a good pattern for using semantic elements when they fit. Using custom elements provides no semantic information and makes using semantic elements look different and unusual.
  - ragall 9mo ago
    > For semantic purposes But semantic purposes are not all possible purposes.
  - jeremyjh 9mo ago
    > But if you are in the habit of using custom elements then you will likely continue to use them even when a more useful element is available This article is written for web developers. I’m not sure who you think you are addressing with this comment. In any case - the argument is a weak one. To the extent people make the mistake you allege they can make it with classed div and span tags as well and I’ve seen this in practice.
  - mr_toad 9mo ago
    > But if you are in the habit of using custom elements then you will likely continue to use them even when a more useful element is available You could say the same about divs. I’ve seen pages where everything is a div. No paragraphs, no headings, no tables, no lists, just divs.
    - kevincox 9mo ago
      That is a strawman. I never said everyone who uses classes perfectly uses semantic elements. My point is that if you are using <div class=my-element> you don't have to change your .my-element CSS selector or JS selection code to improve your code to <p class=my-element>. If you are using <my-element> it is much more work to change your selectors and now you have two ways of doing things depending on if you are using a native semantic element or a div (either a tag selector or class selector). You have made your styling code depend on your element choice which makes it harder to change.
    - novemp 9mo ago
      I've seen <span class=italics>, and it made me want to break things.
- DrammBA 9mo ago
  > I don't know if I'd call it breakage to just... not use them where they should be used. Accessibility only has 2 states: "Working" and "Broken", there's no third "I didn't bother".
  - deleted 9mo ago
    [deleted]
- nailer 9mo ago
  > > If you find yourself writing layouts like this you're probably ignoring a bunch of useful stuff like <aside> <article> <menu> etc. > It's certainly better than calling everything a div. Yes but it's worse than <aside> <article> <menu> etc. as the comment you are replying to mentions.

zahlman 9mo ago

> isn't semantic It's certainly better than calling everything a div. > breaks accessibility features I don't know if I'd call it breakage to just... not use them where they should be used. Of course if a real tag exists that adequately matches the author's intent, that should be preferred over a made-up one.

kevincox 9mo ago
> It's certainly better than calling everything a div. It's not. For semantic purposes <my-element> is the same as <div class=my-element>. So on the surface they are equivalent. But if you are in the habit of using custom elements then you will likely continue to use them even when a more useful element is available so <my-aside> rather than <aside class=my-aside> so in practice it is probably worse even if theoretically identical. Basically divs with classes provide no semantic information but create a good pattern for using semantic elements when they fit. Using custom elements provides no semantic information and makes using semantic elements look different and unusual.
- ragall 9mo ago
  > For semantic purposes But semantic purposes are not all possible purposes.
- jeremyjh 9mo ago
  > But if you are in the habit of using custom elements then you will likely continue to use them even when a more useful element is available This article is written for web developers. I’m not sure who you think you are addressing with this comment. In any case - the argument is a weak one. To the extent people make the mistake you allege they can make it with classed div and span tags as well and I’ve seen this in practice.
- mr_toad 9mo ago
  > But if you are in the habit of using custom elements then you will likely continue to use them even when a more useful element is available You could say the same about divs. I’ve seen pages where everything is a div. No paragraphs, no headings, no tables, no lists, just divs.
  - kevincox 9mo ago
    That is a strawman. I never said everyone who uses classes perfectly uses semantic elements. My point is that if you are using <div class=my-element> you don't have to change your .my-element CSS selector or JS selection code to improve your code to <p class=my-element>. If you are using <my-element> it is much more work to change your selectors and now you have two ways of doing things depending on if you are using a native semantic element or a div (either a tag selector or class selector). You have made your styling code depend on your element choice which makes it harder to change.
  - novemp 9mo ago
    I've seen <span class=italics>, and it made me want to break things.
DrammBA 9mo ago
> I don't know if I'd call it breakage to just... not use them where they should be used. Accessibility only has 2 states: "Working" and "Broken", there's no third "I didn't bother".
- deleted 9mo ago
  [deleted]
nailer 9mo ago
> > If you find yourself writing layouts like this you're probably ignoring a bunch of useful stuff like <aside> <article> <menu> etc. > It's certainly better than calling everything a div. Yes but it's worse than <aside> <article> <menu> etc. as the comment you are replying to mentions.