Some of the more efficient suggestions for CSS notation

When the browser parses the HTML, it constructs a document tree to represent all the displayed elements. It is in a particular style sheet to match elements, according to the standard CSS cascade, inheritance and order rules, in the implementation of Mozilla (and possibly the other), for each element, the CSS engine through the rules to find a match, the CSS engine evaluates each rule is from right to left, Start with the right selector, also called the key selector, until a match is found.

According to this rule, the fewer rules are used, the better the CSS engine will evaluate. Therefore, removing unused CSS is an important step in improving page performance. Then, for CSS rules that contain many elements of the page, optimizing these rules can also improve the performance of the page. The most important thing to optimize page performance is to use explicit, avoid unnecessary redundancy, and make the engine system quickly match elements without spending too much time. Xingcheng Fayon Gift

The following rules are considered inefficient

1. Descendant selectors are used

Use global selector as key

View Source print?

1	body * {...}

2	.hide-scrollbars * {...}

Using the tag Selector as key

View Source print?

1	ul li a {...}

2	#footer h3{...}

1. Using sub-selectors and adjacent selectors

Use global selector as key

View Source print?

1	body > * {...}

2	.hide-scrollbars > * {...}

Use tag Selector as key

View Source print?

1	ul > li > a {...}

2	#footer > h3{...}

Sub-selectors and adjacent selectors are inefficient because, for each element, the browser has to evaluate some other element, which requires double the time spent on the match. At the same time, the less accurate the key, the more time spent on matching elements. However, even if they are not efficient, they are better than the use of the offspring selector.

1. Restricted selector for transitions

The ID selector is unique, and the inclusion of a tag or class qualifier simply adds some useless information (the browser evaluates)

View Source print?

1	ul#top_blue_nav {...}

2	form#UserLogin {...}

1. Used: hover on some elements that are not: hover

Below the non-standard mode. IE7,IE8 will ignore these rules. Under standard mode, some degradation of performance may result

View Source print?

1	h3:hover {...}

2	.foo:hover {...}

Recommended Way

1. Avoid using global styles

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

1. The more precise you write the rules, the better.

Prefer to use class, ID, use tag less

1. Remove some useless qualifiers

The following limitations are superfluous: The 1.id selector is qualified by the class or tag Selector, 2.class is limited by the tag selector (which is good practice if a class is used only for a tag).

1. Avoid using descendant selectors, especially with some useless ancestor elements

Eg:body ul Li a{...} developed a useless body qualification, because all elements are in the body.

1. Replace descendant selectors with the class selector

Eg: if you need two different styles (an unordered list, an ordered listing), do not use the following style

View Source print?

1	ul li {color:blue}

2	ol li {color:red}

Should be used in this way

View Source print?

1	.unordered-list-item{color: blue;}

2	.ordered-list-item{color: red;}

If you must use descendant selectors, it is recommended that you use the child selector

1. Avoid using: hover on some elements that are not connected (for IE sequence)

If you use: hover on some non-connected elements, ie7,8 will think they are useless. It is recommended to use event onmouseover to simulate.

Some of the more efficient suggestions for CSS notation