Use Efficient CSS Selectors

For viewing all tips see here

Applicable To

All Browsers

How Improves Page Load Time

By optimizing browser rendering

Prologue

[Detail of the technology / concept being used in the tip if required]

Why

o        To speed up page rendering by minimizing the number of look ups

o        To evaluate fewer rules by CSS rule engine

How

o        Define rule which are specific as possible as the less specific the key, the greater the number of nodes that needs to be evaluated.

o        Avoid rules with descended selectors  as key as for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root tree

o        Avoid rules with child or adjacent selectors as for each matching element, the browser has to evaluate another node

o        Prefer class and ID selectors over tag selectors

o        Use a class to apply a style to multiple elements

o        Avoid redundant qualifiers like ID selectors qualified by class / tag selectors or class selectors qualified by tag selectors

o        Use class selectors instead of descendent selectors

Exceptions

None

Recommendations

None