Introduction Cascade Layers

One of the fundamental design principles of CSS is cascading, which allows several style sheets to influence the presentation of a document. When different declarations try to set a value for the same element/property combination, the conflicts must somehow be resolved.

That the main reason why we have to carefully think about how we organize the CSS code. Currently, CSS layering has to be achieved with careful management of selector-specificity, or over-use of !important flags – both resulting in unwanted side-effects. For example: 

/* HTML: <input type="password" id="password" style="color: blue;" /> */
input { color: grey; }
input[type="password"] { color: hotpink !important; }
#password { color: lime; }

Will the input color be grey, lime, hotpink, or blue? Or the User-Agent default black?

To regain control over the Cascade in those situations, there is a new CSS Language Feature coming to help us: Cascade Layers (CSS @layer).

Creating a Cascade Layer

With Cascade Layers you can split your CSS into several layers via the @layer at-rule. An example to create a Cascade Layer: 

In total we create 4 layers, in this order:

1. reset
2. base
3. theme
4. utilities

In total, we have 4 layers ( reset , base, theme and utilities ). Competing declarations in the theme Layer (3) will win from declarations in the base (2) and reset (1) Layers because those Layers were declared before theme. Competing declarations in the theme Layer (3) however won’t win from those in utilities (4), as that Layer has been declared later.

Practical example: 

@import(reset.css) layer(reset); /* 1st layer */

@layer base { /* 2nd layer */
  form input {
    font-size: inherit; 
  }
}
@layer theme { /* 3rd layer */
  input {
    font-size: 2rem;
  }
}

Although the input-selector (Specificity 0,0,1) used on line #10 is less specific than the form input-selector (Specificity 0,0,2) from line #4, the declaration on line #10 will win because the theme Layer (3) is ordered after the base layer (2).

Cascade Layers and the Cascade

Layers get a higher precedence than Specificity and Order of Appearance. The criteria of the Cascade become as follows (in order):

1. Origin and Importance
2. Context
3. Style Attribute
4. Layers
5. Specificity
6. Order of Appearance

The Cascade evaluates Layers before Specificity and Order Of Appearance. In this way, we no longer need to worry about these two criteria for CSS found in separate Layers, as Layer Order will already have determined the winning declaration.

Summary

With Cascade Layers we can split your CSS into several layers. We can determine the Layer Order by creating a Layer with @layer. To evaluate Layers, the Cascade will have declarations placed in later declared Layers win from declarations in early-declared Layers (i.e. “Last Layer Wins”). Finally, the Cascade will evaluate Layers before Specificity and Order Of Appearance. 

---