Why is this not default practice?

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 8 hours ago | parent [-]

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

▲

DrammBA 5 hours ago | parent | next [-]

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

	▲	4 hours ago \| parent [-]
		[deleted]

▲

kevincox 5 hours ago | parent | prev | next [-]

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

	▲	jeremyjh 4 hours ago \| parent \| next [-]
		> 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.
	▲	ragall 4 hours ago \| parent \| prev [-]
		> For semantic purposes But semantic purposes are not all possible purposes.

▲

nailer 4 hours ago | parent | prev [-]

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