CSS Selector Efficiency

Here’s a fun (and slightly puzzling) fact: CSS selectors are parsed from right-to-left instead of from left-to-right when the browser renders a page. This means that when you have a selector like .navigation a { color: red; }, the browser first searches for a elements and then narrows its search to the ones with a class of navigation.

This strikes me as particularly inefficient. Considering CSS selectors usually have the most specific criteria on the left, and then subsets more to the right. I don’t know why things are done in this manner, but it seems that they are…

What sorts of CSS selectors are more efficient than others? Chris Coyier of CSS Tricks has some answers.

Fortunately, computers run fast enough that you shouldn’t really have to worry about it too much. It’s nice to shame some minuscule amounts of time off of the rendering, but you’ll see a much more drastic speed increase by minifying and compressing your CSS and scripts.

Efficiently Rendering CSS [CSS-Tricks]