Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /nfs/c01/h08/mnt/2286/domains/didoo.net/html/wp-content/plugins/types/vendor/toolset/types/embedded/includes/wpml.php on line 646

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /nfs/c01/h08/mnt/2286/domains/didoo.net/html/wp-content/plugins/types/vendor/toolset/types/embedded/includes/wpml.php on line 663
CSS Selectors Performance – Didoo
Didoo

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:

 

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?

chart
Source: HTTP Archive

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

Go to blog index