Shared publicly  - 
 
CSS selector speed optimizations

Are really no science - simple is always faster. Why? Because contrary to popular belief - selector rules are interpreted right to left - so a selector hierarchy doesn't make sense. After reading yet another article (linked below) on that subject today - I decided to test it once and for all.

So what would you say is faster?
.article #comments ul > li > a.button vs just .button

Easy right? Keep it simple stupid - and here's my JSPerf test to prove it too (http://bit.ly/MmFZ13). Did not expect it to be 40% faster though ;-)

#css     #css3   #cssselector   #benchmarking   #optimization     #stylesheet  
3
1
Pedro Carvalho's profile photoVeljko Sekelj's profile photoJeffrey Yang's profile photo
 
if you have multiple .button you will need of course to increase the specificity count. 

sorry but i might be misunderstanding, but if had that whole rule, probably you needed it because the dom tree has many more ".buttons"

on other hand if you can say ".article #comments ul > li > a.button " vs ".specialbutton" in that case, it makes sense
 
well of course if your layout is that complex that you'd need a complex rule like that - then its justified.... but 99.9% of the time you don't need your selectors that detailed... you could solve almost everything with just 2 max... because you're sacrificing snappiness with every extra unneeded rule...
Add a comment...