CSS Selectors Performance
Please, stop caring about it and let the browsers do their job
I personally consider this blog post by Ben Frain the tombstone on the dispute about CSS Selectors performance (and a new nail in the coffin for my adoption of BEM and OOCSS).
For me, it has confirmed my believe that it is absolute folly to worry about the type of selector used. Second guessing a selector engine is pointless as the manner selector engines work through selectors clearly differs. Furthermore, the difference between fastest and slowest selectors isn’t massive, even on a ludicrous DOM size like this. As we say in the North of England, ‘There are bigger fish to fry’.
And if you don’t believe me, this is what Chris Coyier has to say:
A good rule of thumb when worrying about the performance of CSS selectors is: don’t worry too much about the performance of CSS selectors.
— Chris Coyier (@chriscoyier) December 20, 2013
And by the way, another blog post have shown that having one or one thousand media query declarations… well, it doesn’t make that much difference!
Update: some friends of mine stated that in OOCSS the performance in discussion actually is the resulting file size of the CSS. Well, this is is not true. And even assuming that it was that the reason, below you can see the stats about what on average a webpage is made of: the CSS file weights for only 2.8% of the total of the page weight. So please, let’s start to optimize where the actual weight is, ok?
Update #2: Paul Irish, on why you should not care about the performance of the “*” selector
Update #3: Ben Frain, in the appendix of his book Enduring CSS makes different tests on the selectors performance and also asks what the browser vendors’ representatives have to say on CSS performance. The conclusion? “Sweating over the selectors used in modern browsers is futile; most selection methods are now so fast it’s really not worth spending much time over. Excessive unused styles are likely to cost more, performance wise, than any selectors you chose so look to tidy up there second.”
Update #4: 2018, and still holds true: in Optimizing CSS: ID Selectors And Other Myths Ivan Čurić confirms: “CSS selector performance is the least of our problems.”
Link: http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/