11 ms·
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 fo
by dovel 11y ago
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?
- ddoolin 11y agoThis 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 11y agoIt 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
- vbezhenar 11y agoModern 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 11y agoMozilla disagrees. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS 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 11y agoAs others have pointed out, that article is now 15 years old.