How to write an efficient CSS selector

We all know that there are many CSS selectors, many people in the CSS page, may feel very fun and very simple, but you will slowly find that there is no rule of the blind writing, although the results can be achieved, but in the actual development may be more useless or repetitive work, and CSS is not efficient. So this article we will teach you how to write efficient, reusable CSS, the main is the following several aspects.

First look at a small piece of CSS code:

#menus > li {font-size:14px;}

It may be assumed that the browser will match the above rules from left to right, and we will imagine that the browser first finds the unique ID menus element, and then applies the style to its immediate child element Li element. It looks like it's quite efficient.

However, in fact, CSS selectors are matched from right to left. Therefore, the above rule is not efficient, the browser must traverse each Li element on the page and determine whether the ID of its parent element is menus.

The style system matches the rule to the left, starting with the rightmost selector. Only the left side of the current selector has other selectors, and the style system will continue to move to the left until it finds the element that matches the rule, or exits because it does not match.

Writing efficient CSS selectors has the following common rules:

First, avoid the use of wildcard rules

In addition to the traditional wildcard selectors, we generalize the adjacent sibling selectors, sub-selectors, descendant selection conforming attribute selectors to the wildcard rule classification, and recommend using only ID, class, and tag selectors.

Second, do not limit the ID selector

A specified ID in the page can only correspond to one element, so there is no need to add additional qualifiers. For example, Div#header is not necessary and should be simplified to #header.

Third, do not qualify the class selector

Instead of qualifying the class selector with a specific tag, the class name is extended according to the actual situation. For example, change the Li.chapter to. Li-chapter, or. List-chapter better.

Iv. make the rules more specific and better

Instead of trying to write long selectors like Ol Li A, it's best to create a class like. List-anchor and add it to the appropriate element.

V. Avoiding the use of descendant selectors

It is usually the highest cost to handle descendant selectors, and using a sub-selector can also get the desired result and be more efficient.

Vi. avoiding the use of tags-sub-selectors

If you have a label-based sub-selector like #menus > li > A, you should use a class to correlate each label element, such as. Menus-item.

Vii. questioning all uses of a sub-selector

Check all the places where the sub-selectors are used, and replace them with specific classes whenever possible.

Viii. reliance on inheritance

Learn which properties can be inherited, and then avoid repeating the rules for those properties. For example, you specify list-style-image for list elements rather than for each list element. Refer to the list of inherited properties to understand the inheritable properties of each element.

The above is how to write an efficient CSS selector method tutorial, I hope to help everyone.