How to use CSS selectors efficiently

This time I will show you how to use CSS selectors efficiently, and what are the precautions for using CSS selectors efficiently. The following is a practical case, let’s take a look.

When I first wrote CSS, I thought it was very simple and could be written as wildly as possible. Later, I gradually discovered that although writing without rules can achieve results, in actual development, it may result in more useless or repeated work, and CSS is not efficient. Therefore, during later development, we deliberately followed certain rules to write efficient and reusable CSS as much as possible. To summarize, the main aspects are the following.

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 browsing The processor first finds the only element with the id of menus, and then applies the style to its direct child element, the li element. 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 have classified adjacent sibling selectors, sub-selectors, and descendant selectors that match attribute selectors into wildcard rule categories. 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, p#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 one like .list-anchor class and add it 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 More efficient.

6. Avoid using tag-sub-selectors

If there are tag-based sub-selectors like #menus > li > a, then they should be used A class to associate with each label element, such as .menus-item.

7. Question all uses of subselectors

Examine 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 for list elements rather than for each list element. Please refer to the list of inherited properties to learn about the inheritable properties of each element.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

CSS3 to create a striped background

css3 to create a semicircular arc

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