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.