[SkeuomorphicBee]

>Use attribute selectors to convey unicity.

> /* Do */

> [id="main"] { max-width: 80ch; }

> /* Don't */

> #main { Max-width: 80ch; }

I strongly disagree with this kind of guideline. The id attribute has very good uses, and in those cases the hash syntax should be the preferred way.

The use of id in an attribute selector is such a bad choice that makes me question the whole document.

[emmacharp]

I'm curious: why is it such a bad choice?

As for the #selector, in what cases do you need that much specificity? Not a rhetorical question!

[mock-possum]

iirc, ids are indexed - that is, when you select an #id, the engine picks the element directly out of the DOM. It’s the fastest / most performant way to select an element, because it has the smallest pool of possible nodes to evaluate to match the id provided.

If you use an attribute selector, the engine must search through every single node in the DOM in order to return matches - an incredibly costly operation by comparison.

(Disclaimer, there may well be optimizations I’m not aware of at this point, but I’m pretty sure that’s why ids are generally preferred as a rule of thumb)