Cascade Layers

New member of CSS: @layer

A new feature has emerged in the CSS field: @layer . This is thanks to Miriam Suzanne, who played a key role in influencing CSS development. I've heard of this feature before, but it pops up in an experimental browser.

Bramus wrote a wonderful article that explores this feature in depth:

The emergence of @layer provides us developers with more tools to control cascade style sheets. What's really powerful about @layer is its unique position in the cascading style sheet: before the Selector Specificity and the order of occurrence. Because of this, we don't have to worry about the selector specificity of the CSS used in other layers, nor the order in which CSS is loaded to these layers - this is very useful for large teams or when loading third-party CSS.

Bramus Van Damme , “The Future of CSS: Layer (CSS@layer)*”

(The bold part is emphasized in the original text)

The key is: this is a new feature that affects the priority of selectors. This requires us to readjust our understanding of CSS, because @layer is a completely new (and powerful) mechanism that determines the style of actual application.

I say it is powerful because the "higher layer" style can beat traditionally stronger selectors, even if the selectors in that layer are weaker themselves.

 /* First floor*/
@layer base-layer {
  body#foo {
    background: tan;
  }
}
/* higher level, therefore win, even if the selector is weak*/
@layer theme-layer {
  body.foo {
    background: #eee;
  }
}

/* Notice! Unlayered styles are more powerful than layered styles, even if the selector is weaker*/
body {
  background: red;
}

Because the bottom segment of CSS is not placed in any layer at all, it wins, even if the selector is weak.

And, you are not limited to one level. You can define and use them as you like.

 @layer reset; /* Create the first layer called "reset"*/
@layer base; /* Create a second layer named "base"*/
@layer theme; /* Create a third layer named "theme"*/
@layer utilities; /* Create a fourth layer called "utilities"*/
/* Or, @layer reset, base, theme, utilities; */


@layer reset { /* Append to the layer named "reset"*/
  /* ... */
}

@layer theme { /* Append to the layer named "theme"*/
  /* ... */
}

@layer base { /* Append to the layer named "base"*/
  /* ... */
}

@layer theme { /* Append to the layer named "theme"*/
  /* ... */
}

This is really shocking.

How will we use it?

I wonder if a common pattern will become...

1. Layer everything so that priority is very clear. Perhaps only unlayered CSS is allowed for super powerful coverage, but ideally, even doing so should be a high-level layer.
2. Reset as the lowest level.
3. Use third-party content as the middle layer.
4. Take whatever the team writes as the top level.

You don't need to worry about leaving space between layers (as when using z-index ), because you can adjust it at any time without attaching numbers.

Time will tell.

debug

I want the developer tools to express hierarchies very clearly because there may be some serious confusion over time when we see that the selectors that look weaker due to the hierarchy position win.

Browser support

It seems that caniuse has noticed this issue!

This browser supports data from Caniuse, which contains more details. The number indicates that the browser supports this feature in this version and later.

Desktop

Mobile/tablet

renew

These are very new (at the time of writing), so instability can be expected. It looks like on October 6, 2021, people decided that the unlayered style is actually the strongest, not the weakest. I've tried updating the article to show this.

The above is the detailed content of Cascade Layers. For more information, please follow other related articles on the PHP Chinese website!