How to write efficient CSS selectors

We all know that there are many kinds of CSS selectors. When many people write CSS pages, they may think it is fun and simple, but you will slowly find that it is just writing without rules, although it can also be achieved. The effect is good, but in actual development, it may cause more useless work or repeated work, and CSS is not efficient. So in this article we will teach you how to write efficient and reusable CSS, mainly in the following aspects.

First look at a short piece of CSS code:

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

Maybe everyone will guess that the browser will match the above rules from left to right. We will imagine that the browser first finds the unique id of menus. element, and then apply the style to its direct child element li on the elements. This seems to be quite efficient.

However, in fact, CSS selectors match 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 starts matching rules from the rightmost selector to the left. As long as there are other selectors to the left of the current selector, the style system will continue to move to the left until it finds an element that matches the rule, or exits due to a mismatch.

There are the following common rules for writing efficient CSS selectors:

1. Avoid using wildcard rules

In addition to wildcard selectors in the traditional sense, we Adjacent sibling selectors, sub-selectors, and descendant selection attribute selectors are all classified under wildcard rules. It is recommended to only use ID, class, and label selectors.

2. Do not limit the ID selector

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

3. Do not limit the class selector

Do not limit the class selector with specific labels, but expand the class name according to the actual situation. For example, change li.chapter to .li-chapter, or even better, .list-chapter.

4. Make the rules as specific as possible

Don’t try to write long selectors like ol li a. It’s better to create a class like .list-anchor and put it Add to the appropriate element.

5. Avoid using descendant selectors

Usually the cost of processing descendant selectors is the highest, but using sub-selectors can also get the desired results and is more efficient.

6. Avoid using tag-sub-selectors

If there are tag-based sub-selectors like #menus > li > a, then a class should be used to associate each Label elements, such as .menus-item.

7. Question all uses of subselectors

Check all uses of subselectors and replace them with concrete classes whenever possible.

8. Rely on inheritance

Understand which attributes can be inherited, and then avoid repeatedly specifying rules for these attributes. For example, specify list-style-image on list elements rather than on each list element. Please refer to the list of inherited properties to learn about the inheritable properties of each element.

The above content is a tutorial on how to write efficient CSS selectors. I hope it can help everyone.

Related recommendations:

Summary of CSS selector definitions and usage

CSS selector

CSS Basic CSS Selector_Basic Tutorial

The above is the detailed content of How to write efficient CSS selectors. For more information, please follow other related articles on the PHP Chinese website!