Page Speed: Use efficient CSS selectors

Page Speed recommends:

Avoid a universal key selector

Allow elements to inherit from ancestors, or use a class to apply a style to multiple elements.

Make your rules as specific as possible

Prefer class and ID selectors over tag selectors.

Remove redundant qualifiers

These qualifiers are redundant:

• ID selectors qualified by class and/or tag selectors
• Class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway).

Avoid using descendant selectors, especially those that specify redundant ancestors

For example, the rule body ul li a {...} specifies a redundant body selector, since all elements are descendants of the body tag.

Use class selectors instead of descendant selectors

For example, if you need two different styles for an ordered list item and an ordered list item, instead of using two rules:

    ul li {color: blue;}
    ol li {color: red;}

You could encode the styles into two class names and use those in your rules; e.g:

    .unordered-list-item {color: blue;}
    .ordered-list-item {color: red;}

If you must use descendant selectors, prefer child selectors, which at least only require evaluation of one additional node, not all the intermediate nodes up to an ancestor.

Avoid the :hover pseudo-selector for non-link elements for IE clients

If you use :hover on non-anchor elements, test the page in IE7 and IE8 to be sure your page is usable. If you find that :hover is causing performance issues, consider conditionally using a JavaScript onmouseover event handler for IE clients.

Read More