Shulou(Shulou.com)06/03 Report--

This article introduces how to understand the logical processing of the selector in CSS, the content is very detailed, interested friends can refer to, hope to be helpful to you.

For a long time in the past, we have said that CSS has no logic, meaning that there is no control flow in CSS, and there is no way to organize CSS like other programming languages. The inherent lack of logic in CSS led to the emergence of preprocessors. However, the industry has different opinions on the CSS preprocessor, and those who support the preprocessor think that it makes up for the missing feature of CSS, while those who oppose the preprocessor think that CSS should not be designed logically, and they think that the concept of preprocessor should not be introduced at all.

However, a unique way of thinking recently jumped into my head. It makes me feel that CSS is really logical! Few people have really thought about it, which is probably the biggest reason why we have always thought that the logic of CSS is lacking.

I find that we can understand the composite selector as: the body part + the condition part. First of all, let's look at an example:

CSS

Div.sidebar. Login-box a.btn span {

/ *. /

}

In this composite selector, the body part is span, and the conditional part is IF (inside. BTN) AND IF (on a) AND IF (inside. Login-box) AND IF (inside. Sidebar) AND IF (on div).

That is, each part of a selector is an if statement that needs to be satisfied (or not satisfied) when parsing the selector. With this subtle and brand-new understanding, now when we look back at the CSS code we have written, we will realize that whether the selector is good or bad will have a direct impact on efficiency. Will we really write the following logic? (pseudo code):

CSS

@ if exists (span) {

@ if is-inside (.btn) {

@ if is-on (a) {

@ if is-inside (.login-box) {

@ if is-inside (.sidebar) {

@ if is-on (div) {

# Do this.

}

}

}

}

}

}

Probably not. It seems too indirect and too verbose. Maybe we just need to write:

CSS

@ if exists (.btn-text) {

# Do this.

}

Whenever we add a layer of restriction to the selector, we actually add an extra if statement. This leads to cyclomatic complexity problems (Cyclomatic Complexity).

Cyclical complexity

In software engineering, cyclomatic complexity is a measure of program complexity, which generally calculates the number of control flows in a program (such as if, else, while, etc.). The more control flows there are in the program, the higher the cyclomatic complexity. We naturally want to keep the cyclomatic complexity as low as possible, because the higher the cyclomatic complexity:

The harder it is to derive the code.

More hidden problems that may lead to failure

Code is more difficult to modify, maintain, and reuse

You need to consider the results of more code execution and its side effects

It will also be more difficult to write test code

Considering the parsing process of CSS in terms of cyclomatic complexity, we can see that browsers need to make a lot of decisions before rendering styles. The more if statements we write in the selector, the higher the cyclomatic complexity of the selector, which means that the worse the selector we write, the more conditions we need to match in order to satisfy this selector rule. At the same time, the selector we write lacks clarity and reusability, because the introduction of too many unnecessary if statements can lead to inaccurate false positive.

Rather than nesting span inside .btn and writing a lot of restrictions, it would be better to create a new class. Btn-text to describe the span. This is more straightforward and more concise and robust (the more @ if statements make selector rules less likely to be satisfied).

It is worth noting the way the browser parses the selector you write: from right to left. If you are writing your selector, the first question that comes to mind is: "is this a span element?" Then you usually write the selector too verbose. You should think from another angle, write clear and accurate selector rules, and completely get rid of those redundant conditional statements.

Please don't write too broad rules, causing the selector you write to select a large number of DOM elements at the beginning of the match-and then have to gradually delete matching objects through more conditional statements. It is a better way to match as few elements as possible from the beginning of the rule parsing of the selector.

Cyclomatic complexity may be a higher-order principle for CSS, but if we use it to consider the logic contained in the selectors we write, we may be able to write better code.

Some small rules that are easy to follow

Keep your selector simple: every time you want to add rules to a selector, you are adding additional if statements. Read these if statements aloud and carefully consider whether they need to be added. You need to keep the selector you write reasonable and concise at all times.

Keep cyclomatic complexity to a minimum: use a tool like Parker to test the cyclomatic complexity of the selector you write (see documentation: Identifiers Per Selector)

If you don't need this test condition, don't put it in the selector: sometimes it's necessary to use nested structures in CSS, but most of the time it's not, and you can't even fully trust Inception Rule.

Consider how the selector is written from the right: start with the kind of element you need to match and write as little extra CSS code as possible to make a correct match.

Write selectors with a clear purpose: make sure that the selectors you write are exactly what you want, not the code that happens to make the page display properly.

Your selector is the most basic part of your CSS structure, so make sure that the code you write is reasonable and concise.

On how to understand the logic of the selector in CSS to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.