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.

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

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

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

> For semantic purposes

But semantic purposes are not all possible purposes.

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

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.

I've seen <span class=italics>, and it made me want to break things.

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

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