A guide to the actual use of selectors in CSS

When I first started to write CSS, the high degree of freedom in its code always puzzled me. This means that the same design, if you let different people to implement, the final code must be different. But there is a problem, if different people through different methods and code style, from the appearance of the same design, it will be difficult to judge who did better. Want to also, since all realized the design, has achieved the goal, the CSS this does not have the program logic the code, but also can find what to explain who has done more outstanding?

And now, I agree with the idea that CSS, the descriptive language, still has the quality of the code evaluation. The standard of Evaluation is maintainability (maintainability) and performance (performance), in the more popular words, good CSS, to the developer's work-friendly (dev-friendly), but also to browser-friendly (browser-friendly). This article explains how to improve the quality of CSS code from the perspective of CSS selectors.

Key selector and browser style rule matching principle

The concept of CSS selectors, as mentioned in the beginning of the detailed parsing of CSS precedence, refers to the part of each style rule that describes which elements are to be played by the style, or the part before {}. In this article, there is an additional concept: Key selector. The key selector is the last selector before each style rule starts with {The following figure:

The CSS selector determines which elements are to be used for subsequent property definitions, so there is a matching process in which browsers apply styles to corresponding elements based on CSS selectors. With respect to the browser's style matching system, David Hyatt the following in the writing efficient CSS to use in the Mozilla UI:

The style system matches a rule by starting with the rightmost selector and moving to the left through the rule ' s selector S. As long as your little subtree continues to check out, the style system would continue moving to the left until it eithe R matches the "rule" or bails out because of a mismatch.

This means that the browser engine is in the right to left order when the style matches. When a particular style rule is matched, the right-to-left process persists until the entire selector sequence is read and the match is completed, or because one of the places does not match (and then to another style rule).

As for why browsers choose this sequence of matches, you can look at the discussion on the stack overflow. Broadly speaking, because the rightmost key selector directly represents the element that the style definition should act on, so the right-to-left order is better for browsers to determine the set of elements that have a style definition when the initial match, and to avoid most of the actual selectors when looking for the style of an element.

A better CSS selector is to allow the browser to reduce the number of matching queries in the style matching process to complete style matching faster, thus optimizing the front-end performance. In this case, you must also refer to the browser's matching order for styles from right to left.

How CSS selectors are used correctly

More specific, more specific key selectors

The key selector is the part that the browser engine reads first when the style matches, so if you use a more specific, specific selector in a style rule, you can help reduce the number of browser lookup matches.

For example, a selector like this below:

CSS code copy content to clipboard

. Content. Note Span{}

The last span is the key selector, and the Span tab is very much used in the Web page. When the browser reads the selector from span, it may do some extra work on style matching.

If you're sure you just want to define a style for a span element that's in that position, it's a better practice to name the class for span, such as span.note_text, and then simply write:

CSS code copy content to clipboard

. note_text{}

Use the class selector

The class selector (class selector) is the most advantageous selector for performance optimization. The disadvantage of class,id is that it is only allowed to be defined to an element and cannot be reused. And besides, it doesn't have any better place to use than class. Many times it is difficult to determine whether an element is unique or not. In addition, it is always a good practice to use class to define a style and keep the ID to JavaScript. If you can, do not use IDs to define styles.

In contrast to class, tags are more repetitive in HTML, so it's also possible for browsers to do extra work when styles match. If you can, in addition to the CSS style clear 0 (reset), do not use the label selector (also known as the element selector).

Shorten selector sequence

Inherited writing (exactly, this refers to the inclusion selector in the CSS relational selector) is a common style in CSS. The original intention is that if there are two elements, are the same label or have the same class name, the addition of the parent element of the selector to form a sequence of selectors, you can avoid when not required two elements of the style of interaction. For example, Confirm_layer. SUBMIT_BTN means the style is applied when the class name is SUBMIT_BTN and there is an element of the parent element named Confirm_layer.

However, avoiding the interaction of element styles does not mean that inheritance selectors can be used arbitrarily. As mentioned earlier, the browser reads the entire selector sequence from right to left until it finishes reading and the match completes, or it is canceled because it does not match. Therefore, a short selector sequence is more conducive to faster browser completion of the matching process. In contrast, lengthy selector sequences are considered inefficient, such as:

CSS code copy content to clipboard

. Header ul Li. nav_link{}

The proposal is written as:

CSS code copy content to clipboard

. header. nav_link{}

In general, no more than 3 levels of inheritance level can meet the actual development requirements. Therefore, you should reduce the unnecessary inheritance levels and use a shorter sequence of selectors.

In addition, there is a problem with the long selector sequence. Style rules with longer selectors, CSS precedence calculations are also larger, so if you need to write a new style to overwrite it later, you need to write a longer selector (or use an ID) to get a higher level of CSS precedence. This is bad for both performance and code readability.

Avoid chain selectors

A chain selector (chaining selectors) is a case where multiple selector decisions are written on a single element at the same time. For example, p.name refers to the class named name, and the label is the element of P to apply the style. These decision combinations can be ID selectors, tag selectors, and any combination of class selectors.

However, chain selectors are overly defined (over qualified), are not conducive to reuse, and are not conducive to performance optimization. Such as:

CSS code copy content to clipboard

a#author{}

The proposal is written as:

CSS code copy content to clipboard

#author {}

Here's a is not necessary. An ID corresponds to only one element, and there is no need to emphasize what the label of the element is (likewise, class is not necessary). In addition there are:

CSS code copy content to clipboard

. Content span.arrow{}

The proposal is written as:

CSS code copy content to clipboard

. Content. arrow{}

The span in the span.arrow here is also unnecessary. On the one hand, this adds an extra piece of work to the browser when the style matches: Check that the label name of the element with class name arrow is span and thus degrade performance. On the other hand, if this restriction is removed,. Arrow's style definitions can be used on more elements and are more reusable. Otherwise, you have to tell someone that you can use this only on a span label.

Similarly, multiple class chains are written in such a style as

CSS code copy content to clipboard

. tips.succuss{}

It is recommended that you change the name to read:

CSS code copy content to clipboard

. tips_succuss{}

This will help the browser reduce the extra style matching work.

In addition, IE6 also has a chain selector problem, when multiple class selectors are written together, such as. CLASS1.CLASS2.CLASS3, the normal situation is that only elements that have all of the class at the same time apply the style. But IE6 only the last one, which is in line with the. Class3 the element of this selector, the style is applied.

Exceptional circumstances

The suggestions for the wording of the selectors described above are only the theoretical results from the optimization of browser rendering performance and the reusability of code. In practice, you do not need to strictly follow these elements. For example, if you are really prepared to add a style to all a tag elements within an element with class name intro, it is wise to have a selector such as intro a.

Conclusion

For a guide to efficient CSS selectors, you can also read the use efficient CSS selectors in Google developer.

Today, modern browsers are increasingly optimized for style matching (refer to CSS Selector performance has changed!), and there are some aspects that we no longer need to worry about. However, this does not mean that you do not need to consider writing a reasonable CSS selector. CSS Selector performance optimization is still the case, your selector should better reflect your intentions, rather than the use of arbitrary. More importantly, it is not difficult to write CSS selectors in such a slightly delicate, thought-like way. As long as you want to form such a habit, you can naturally do better in this area, why not?