How to Use CSS Cascading Style Sheets @layer

@layer declares a cascading layer where rules within the same layer will be cascaded together, giving the developer more control over the cascading mechanism. This article mainly explains how to use CSS Cascading Style Sheets @layer. Hope it works for you.

How to Use CSS @layer

Create Cascading Layers

Cascading layers can be declared in a number of ways.

@layer reset {
  * { /* Poor Man's Reset */
    margin: 0;
    padding: 0;
  }
}

@layer reset;

@import(reset.css) layer(reset);

Each of the above methods creates a cascading layer called reset.

Management Cascading Layer

Cascading layers are sorted in the order in which they are declared. In the following example, we build four cascaded layers, namely reset, base, theme, and utilities.

@layer reset { /* Create cascade layer "reset" */
   * {
     margin: 0;
     padding: 0;
   }
}

@layer base { /* Create cascade layer "base" */
   ...
}

@layer theme { /* Create cascade layer "theme" */
   ...
}

@layer utilities { /* Create cascade layer "utilities" */
   ...
}

In the order in which they are declared, the layer order becomes:

When cascading layer names are reused, the style is appended to the existing cascading layer. The order of the cascaded layers remains the same since only the first occurrence has determined the order.

@layer reset { /* Create the first cascaded layer "reset" */
   ...
}

@layer base { /* Create the second cascading layer "base" */
   ...
}

@layer theme { /* Create a third cascading layer "theme" */
   ...
}

@layer utilities { /* Create a fourth cascaded layer "utilities" */
   ...
}

@layer base { /* will add styles to cascade layer "base" */
   ...
}

Keeping the layer order unchanged when reusing cascading layer names makes the @layer syntax more convenient and strict. Use it to pre-establish the layer order and append all CSS.

@layer reset; /* Create the first cascaded layer "reset" */
@layer base; /* Create the second cascading layer "base" */
@layer theme; /* Create a third cascading layer "theme" */
@layer utilities; /* Create a fourth cascaded layer "utilities" */

@layer reset { /* Add style to cascade layer "reset" */
   ...
}

@layer theme { /* Add styles to cascade layer "theme" */
   ...
}

@layer base { /* Add style to cascade layer "base" */
   ...
}

@layer theme { /* Add styles to cascade layer "theme" */
   ...
}

Of course, you can use a shorter syntax to declare cascaded layers.

@layer reset, base, theme, utilities;

As can be seen from the above, when multiple cascading layers are declared, the declaration of the last cascading layer wins.

@import(reset.css) layer(reset); /* first cascading layer */

@layer base { /* Second cascade layer */
   form input {
     font-size: inherit;
   }
}

@layer theme { /*The third cascading layer */
   input {
     font-size: 2rem;
   }
}

If the analysis is performed according to the previous CSS cascade, the priority of form input (multi-level) will be higher than that of input. But due to what the cascading layers do, the @layer theme's input wins.

Cascading Level Nesting

Cascading layers support nested usage. See the example below.

@layer base { /* First cascade layer */
   p { max-width: 70ch; }
}

@layer framework { /* Second cascade layer */
   @layer base { /* Nested sub-cascade layer 1 of the second cascade layer */
     p { margin-block: 0.75em; }
   }

   @layer theme { /* Nested sub-cascade layer 2 of the second cascade layer */
     p { color: #222; }
   }
}

In this example, there are two cascaded outer layers.

The framework layer itself also contains two layers.

If you want to attach a style to a nested cascade, you need to refer to it by the full name below.

@layer framework {
   @layer default {
      p { margin-block: 0.75em; }
   }

   @layer theme {
     p { color: #222; }
   }
}

@layer framework.theme {
   /* These styles will be added to the theme layer in the @layer framework layer */
   blockquote { color: rebeccapurple; }
}

@media vs @layer

@media (min-width: 30em) {
  @layer layout {
    .title { font-size: x-large; }
  }
}

@media (prefers-color-scheme: dark) {
  @layer theme {
    .title { color: white; }
  }
}

If the first @media (min-width: 30em) matches (based on viewport dimensions), the layout cascade layer will come first in the layer order. If only @media (prefers-color-scheme: dark) matches, the theme will be the first layer. If the two matches, the layer order will be layout and theme. If there is no match, the layer is not defined.