Guide to CSS selector performance

Really interesting post on the windows blog about CSS selector performance

If you’re a web developer, you may have already heard that some CSS selectors are faster than others. And you’re probably hoping to find a list of the better selectors to use in this article.

Well, not quite. But bear with me, I promise that by the end, you’ll have learnt something new about CSS selector performance.

The way you write CSS selectors does play a role in how browsers render your web pages.

Whenever a part of your page changes, the browser engine that’s running it needs to take a look at the new DOM tree, and figure how to style it based on the available CSS stylesheets. This operation of matching styles to DOM nodes is called a style recalculation.

Without getting into a lot of details, the browser engine needs to look at all your rules and make decisions as to which ones apply to a given element. To do this, the engine needs to look at the rule selector, and this happens from right to left.