What is CSS @Layer, the most anticipated new feature of 2022?

As we head into 2022, new CSS features emerge one after another, and one of the most notable new features in the CSS world is css@Layer.

This article, will use the most concise language, quickly let readers understand, in the end what is CSS @layer new specification.

Problems with CSS priorities in the past

If we have a lot of styles on the page, such as custom styles when we develop the page, or component library styles introduced. At this point the style will be very confusing and difficult to manage.

When we want to override styles that we didn’t write, we often have to override them by using style names with higher priority weights.

Also, developers tend to abuse style priorities when they feel out of control! Important, which in turn leads to more messy style structures later on.

CSS @Layer was born out of the background of better control and management of CSS.

What is CSS @Layer?

CSS @Layer is defined by the specification from CSS Cascading and Inheritance Level 5.

What is CSS @Layer? Simply put, the @layer in the @rule of CSS declares a cascading layer, where rules within the same layer are cascaded together, giving the developer more control over the cascading mechanism.

The syntax is also very simple. Look at this example:

@layer utilities {
  /* Create a cascading layer called Utilities */
}
Copy the code

So we create an @layer cascading layer called Utilities.

@layer How does the cascading layer work?

Style priority is managed through the @layer cascading layer

The @layer cascading layer is used to control the priority of different styles.

Let’s look at an example where we define two @layer cascading layers A and B:

<div></div>
Copy the code

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue; }}@layer B {
    div {
        background: green; }}Copy the code

Since @layer B is placed after @Layer A, all styles in @Layer B take precedence over @Layer A, and the final div color is green:

Of course, if there are too many @ layers on the page, it might not be easy to remember the order of all the @ layers, so here’s another way to write it.

We can name multiple @Layer layers at the same time and fill in the style rules later.

<div></div>
Copy the code

@layer B, C, A;
div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue; }}@layer B {
    div {
        background: green; }}@layer C {
    div {
        background: orange; }}Copy the code

Above code, we first define @layer B, C, A three @layer cascade layer. The CSS code for each cascading layer is supplemented by the CSS code for each cascading layer, but the style takes precedence:

A > C > B

Thus, the final div has the color defined in @layer A, which is blue:

At this point, CSS @Layer is clearly visible.

Using CSS @layer, we can put different CSS modules into different @layer, using the order, very good to control the global style priority.

@layer Three ways to introduce definitions for cascading layers

There are two ways to introduce the @layer cascading layer. Here are three ways to introduce the @layer cascading layer.

1. Create a block-level @Layer rule that contains the CSS rules that apply within the layer:

@layer utilities {
  p {
    padding:.5rem; }}Copy the code

2. A cascading layer can be created with @import, and the rules exist within the imported stylesheet:

@import(utilities.css) layer(utilities);
Copy the code

3. Creates a named cascading layer without specifying any style. Styles can then be added anywhere in the CSS:

@layer utilities;
// ...
// ...
@layer utilities {
    p {
        color: red; }}Copy the code

Non-@ layer wrap and @layer in-layer style priority

And, of course, there’s a situation where the style that’s not wrapped in the @ Layer, what’s its priority compared to the style that’s wrapped in the @layer?

Look at this example:

@layer A { a { color: red; }}@layer B { a { color: orange; }}@layer C { a { color: yellow; }}a { color: green; } /* Unwrapped @layer style */ 
Copy the code

An important conclusion here is that non-@ Layer wrap styles have a higher priority than @ Layer wrap styles, so the order of the above rules is:

Unwrapped @layer style > @Layer C > @Layer B > @Layer A

Anonymous and nested layers

There are also two hierarchies, anonymous and nested.

Anonymous layer

Allows you to create an unnamed @layer:

@layer {
  p {
    margin: 1rem; }}Copy the code

Here, an anonymous layer is created. Two important features of the anonymous layer:

1. You cannot add rules to it after it is created
2. This layer has the same functionality as other naming layers and has a higher priority than other defined @Layer layers

Look at an example:

<div></div>
Copy the code

div {
    width: 200px;
    height: 200px;
}
@layer {
    div {
        background: pink; }}@layer B, C, A;
@layer A {
    div {
        background: blue; }}@layer B {
    div {
        background: green; }}@layer C {
    div {
        background: orange; }}Copy the code

In the code above, we first define an anonymous layer, specify the color of div as pink, and then define @layer B, C, A. The priority order is as follows:

A > C > B > Anonymous layer

The final color is @layer A’s color value — blue:

If, we leave the anonymity layer at the end:

div {
    width: 200px;
    height: 200px;
}
@layer B, C, A;
@layer A {
    div {
        background: blue; }}@layer B {
    div {
        background: green; }}@layer C {
    div {
        background: orange; }}@layer {
    div {
        background: pink; }}Copy the code

At this point, the styles are in priority order:

Anonymous layer > A > C > B

The final color is the color value within the anonymous layer — pink:

Nested layer

With the anonymity layer out of the way, let’s look at the nesting layer.

As the name implies, the nesting layer means that inside the @layer, we can nest the @layer cascade layer. Something like this:

@layer A {
  @layerB{ ... }}Copy the code

Of course, there is another syntax, which is equivalent to:

@layer A.B {
  ...
}
Copy the code

With that in mind, look at this example:

<div></div>
Copy the code

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
    
    @layer B {
        div {
            background: red; }}}Copy the code

We nested @layer B inside @layer A, and we defined A div style. What color is the background of the div?

It ends up being blue. Background: Blue. Why is that? This is easy to remember, but let’s assume that if there were no @layer A wrapped around it, it would actually be the @layer versus the non-@ layer, where the non-@ layer (we can think of it as the higher level @layer) has higher priority.

Therefore, for nested relationships within a single @layer, the style priority is:

@layer A > @layer A.B

Priority relationships of multiple nested layers

OK, let’s look at this case:

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red; }}}@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green; }}}Copy the code

There can be multiple nested @ layers at the same time. So where are the priorities in this case?

The rule here is that @layer with higher priority, regardless of nesting, has higher priority overall than @layer with lower priority (regardless of nesting), so the order of precedence here is:

@layer C > @layer C.D > @layer A > @layer A.B

! Impact of important on the CSS @Layer

Look again! Impact of important on the CSS @Layer.

This can be broken down into several cases, but let’s start with one of them:

<div></div>
Copy the code

div {
    width: 200px;
    height: 200px;
    background: black;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red; }}}@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green! important; }}}Copy the code

In the above code, we add a

If, do not consider! Important rule, then the actual CSS priority is (the higher the serial number, the higher the priority) :

1. @layer A.B
2. @layer A
3. @layer C.D
4. @layer C
5. Non-layer wrapped block

So, the color of

In fact, the final

1. @layer A.B
2. @layer A
3. @layer C
4. Non-layer wrapped block
5. ! @layerc.d under important

In other words, here! The important rule takes precedence over no. Above important rule.

CodePen — CSS Cascade@layer CodePen

Non-@layer contains blocks! Important and @layer contains blocks! important

At this point, you might think you understand. Ok, let’s look at another DEMO, if we add a non-@ layer contain block, add one too! The important rule, where things get interesting.

<div></div>
Copy the code

div {
    width: 200px;
    height: 200px;
    background: black! important;
}
@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
            background: red; }}}@layer C {
    div {
        background: yellow;
    }
    @layer D {
        div {
            background: green! important; }}}Copy the code

If you look closely at the code above, the non-@Layer contains block, we added one too! Background-color: black! Background-color: black! Background-color: black! Important should take precedence over background: green!

In fact, the final

This is a very important feature in comparison to normal (non! Important) rule, the more cascading (@layer rule after sorting), the lower the priority; On the contrary, in comparison! When the important rule is used, the later the cascading rule is, the higher the priority is.

Further, we need to learn about CSS Cascading.

CSS Cascade specification

Before CSS @layer, let’s take a quick look at a diagram:

The diagram above shows the priority of CSS style claims before CSS @Layer. According to the CSS Cascading 4(Current Work) standard, the Cascading order of claims defined in the Current specification is as follows (Cascading order as you go down, ascending order as you go down) :

• Normal user agent declarations
• Normal user declarations
• Normal author declarations
• Animation declarations
• Important author declarations
• Important user declarations
• Important user agent declarations
• Transition declarations

Using the above algorithm, you can get an order of style priorities that looks something like this (the lower the priority is, the following rules are in ascending order) :

1. User Agent – Common style of User Agent
2. User – Common style for User Settings
3. Author-common style of page Author
4. Animations – Animation styles
5. ❗️Author – Page Author! Important style
6. ❗️User – Set by the User! Important style
7. ❗️User Agent – User Agent! Important style
8. Transitions – The transition style

User agent style: The browser has a basic style sheet to set the default style for any web page. Collectively, these styles are user-agent styles page author styles: The author of a web page can define the style of a document, which is the most common style sheet. In most cases, this type of style sheet will define more than one, they make up the look and experience of the site, namely the page theme, which can be understood as the page author style user style: the reader, as the browser user, can use a custom style sheet to customize the user experience, custom user preferences, can be understood as the user style

For CSS Cascading, aka the Cascading specification, you can read my article to get a better understanding of Cascading in CSS (Cascading Style Sheets).

With CSS @layer, the cascading priority order is updated as follows:

The whole thing gets a little more complicated, but the whole thing follows two rules:

1. ! importantStyle over non! importantstyle
2. In the comparison! importantThe priority of a rule is reversed from that of a normal rule. In a normal state, the lower the priority is, the lower the priority is! importantThe lower priority is higher

To summarize

So that’s the basics of CSS @Layer.

The creation of CSS @Layer gives us the ability to better divide the style hierarchy of the page and better deal with the priority order of internal styles and external reference styles, which is a significant innovation.

At the same time, it made us realize that we need to gradually move away from mass use! Important overrides the style priority error, avoiding many of the unwanted side effects of priority issues.

Of course, to today (2022-03-14), let’s take a look at the compatibility:

CSS @Layer is now available in the latest versions of Chrome, Safari, Firefox, and Edge, and can be initially used with some polyfills in the near future. It will become an essential part of the business CSS code.

read

There has been a lot of discussion about CSS @layer on the outside. Here are some excellent articles. If you are interested, you can continue to read:

• Cascade Layers Explainer
• Getting Started With CSS Cascade Layers
• Some of the screenshots in this article are referenced in How Does! important actually work? (It’s not what you think!)

The last

Well, the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.