Efficient CSS writing

BelowArticleIs an efficient way to translate Google CSS statements

Article: http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

Use efficient CSS styles

Overall

Avoid inefficient key selectors matching a large number of elements to accelerate page display.

Details

When the browser parses HTML, it constructs a document tree to display all the displayed elements. It matches elements in a specific style table, and inherits and sequential rules according to the standard CSS cascade,

In Mozilla's implementation (and possibly others), for each element, the CSS engine searches for matching through rules, and the CSS engine evaluates that each rule is from right to left, starting from the rightmost selector,

It is also called the key selector until a match is found.

Based on this rule, the fewer rules are used, the better the CSS engine will evaluate. Therefore, removing useless CSS is an important step to improve page performance. Then, for CSS rules that contain many elements on the page,

Optimizing these rules also improves the page performance. The most important thing to optimize page performance is to use clear rules to avoid unnecessary redundancy, so that the engine system can quickly match elements without spending too much time.

The following rules are considered inefficient. 

(1) The descendant selector is used.

1. Use the global selector as the key

Eg:Body *{...}
. Hide-scrollbars *{...} 

2. The tag selector is used as the key.

Eg:Ul Li {...}

# Footer H3 {...} 

(2) Use the sub-Selector and adjacent Selector

1. Use the global selector as the key

Eg:Body> *{...}
. Hide-scrollbars> *{...} 

2. Use the tag selector as the key

Eg:Ul> LI> {...}

 

 # Footer> H3 {...}

The child selector and the adjacent selector are inefficient because the browser has to evaluate some other elements for matching each element. It takes twice the matching time. At the same time, the less accurate

Key, the more time spent on matching elements. Even less efficient, they are a little better than the use of the descendant selector.

(3) Definition selector of transition

Eg:Ul # top_blue_nav {...}
Form # userlogin {...} 

The ID selector is unique. The limitation that contains tags or classes only adds useless information (evaluated by the browser)

(4) use: hover on some elements without: hover

Eg:H3: hover {...}

. Foo: hover {...}

 In non-standard mode. IE7 and IE8 will ignore these rules. In the standard mode, performance may degrade.

Recommended Methods

(1) Avoid using global styles

Allow an element to inherit its ancestor, or use a class to apply complex elements.

(2) the more accurate the rule is, the better.

Tend to use class, ID, less tag

(3) Remove unnecessary restrictions

The following limitations are redundant.

1. The ID selector is limited by the class or tag selector.

2. The class is limited by the tag selector (if a class is only used for one tag, this is also a good practice)

(4) Avoid using descendant selectors, especially including useless ancestor elements.

Eg: Body ul Li{...}A useless body limitation is made, because all elements are in the body.

(5) use the class selector to replace the descendant Selector

Eg: If you need two different styles (one unordered list and one ordered list)

Do not use the following style

Ul Li {color: Blue} ol Li {color: Red}

This should be used. Unordered-list-item {color: Blue ;}

. Ordered-list-item {color: red ;}

If you must use a child selector, we recommend that you use a child selector.

(6) Avoid using hover on some unconnected elements (for IE Series)

If you use: hover on some unconnected elements, IE7, 8 will think they are useless. We recommend that you use event onmouseover to simulate

-------- End -------