Performance of CSS Selectors

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

The idea here was to compare different styles of writing CSS and see how they affect the page rendering. So using all ID’s, using all classes, using OOCSS techniques, etc. I gave some best practices advice on this a little while ago, but had no tests to back anything up. So the most interesting part of it all to me was how the tests were being measured. The test idea came from a Jon Sykes article where he writes:

At the very top of the a HTML I would use Javascript to create a timestamp, this is the starting timer for everything. I would then have a function on a setInterval so it loops, the function checks a dom element using getElementById, it checks to see if that node is there, if it is it checks to see if the node has the style applied to it, if it does it fires a new timestamp marks the difference between the start and the end and then writes that out.

The results concluded that OOCSS is way fast compared to declaring each selector with property and values separately. Even to the point being noticeably slower. Also, Opera is the fastest and Firefox is the slowest (IE not tested). But is this the perfect test? Doesn’t having all the repetitive property and values increase the size of the CSS and maybe that’s why it’s slower? It’s hard to test only the speed of the selector, as far as I know.

Direct Link →