[dovel]

I dont do this repeating class business but CSS Tricks 'css guidelines' web page says that when you do : '.collection li', it first searches through the page for all 'li's then wittles it down to the ones within the correct parent. Essentially that css selectors work from right to left. So I guess the idea is that classing up the li elements within a parent may be marginally quicker? I have never bothered though. Does anyone know more about this?

[vbezhenar]

Modern browsers do their best to optimize typical use-cases for CSS selectors and .collection li for sure will be handled optimally. You shouldn't worry about CSS selector performance unless you have to provide good performance for very old browsers or hit specific performance problem. Optimize for humans, not for computers.

[rezistik]

Mozilla disagrees.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writi...

They explicitly state using css classes is more performant than using tags.

I'd be interested in a CSSPerf(Do they have those?)

[calaveraDeluxe]

As others have pointed out, that article is now 15 years old.

[ddoolin]

This is true, actually. They are read from right-to-left. I'm not sure how much extra resources are expended searching this way opposed to the other, though my guess would be the same as yours. It may be worth a benchmark?

[anton-107]

It used to be the issue in the "old browsers", modern browsers optimize the css query selectors to a very high extent, so users probably won't see a difference on any real web page / app