CSS Cascade Layers is a CSS feature that allows developers to define explicit contained layers of specificity so that they have full control over which styles take priority in a project without relying on specificity hacks or !important declarations. The @layer at-rule allows authors to explicitly layer their styles in the cascade before specificity and order of appearance are considered. This feature is now 90.19% supported globally according to Can I use website on May 15th, 2023.

Cascade Layers are intended to solve tricky problems in CSS. The main problem is specificity conflicts that escalate when a project grows in size and complexity. Cascade Layers aim to solve this problem by providing a much simpler fallback stylesheet. The @layer at-rule is used to create a cascade layer in one of three ways. The first way is to create a named cascade layer with the CSS rules for that layer inside. The second way is to create a named cascade layer without assigning any styles. The third way is to create an anonymous cascade layer by using the @layer at-rule without a name.

Here are some code snippets to illustrate the three ways to create a cascade layer using the @layer at-rule:

1. Create a named cascade layer with the CSS rules for that layer inside:

    @layer utilities {
      .padding-sm {
        padding: .5rem;
      }
      .padding-lg {
        padding: .8rem;
      }
    }
   

2. Create a named cascade layer without assigning any styles:

    @layer typography {}
   

3. Create an anonymous cascade layer by using the @layer at-rule without a name:

    @layer {
      .text-red {
        color: red;
      }
    }
   

And here's an example of how to use CSS Cascade Layers:

1. Organize your styles by layer:

    @layer typography {
      h1 {
        font-size: 2rem;
        font-weight: bold;
      }
      p {
        font-size: 1rem;
        line-height: 1.5;
      }
    }
   
    @layer layout {
      .container {
        max-width: 1200px;
        margin: 0 auto;
      }
      .row {
        display: flex;
        flex-wrap: wrap;
      }
    }
   
    @layer colors {
      :root {
        --primary-color: #007bff;
        --secondary-color: #6c757d;
        --success-color: #28a745;
      }
    }
   

2. Use layers for responsive design:

    /* Mobile styles */
    @layer mobile {
      .container {
        max-width: 100%;
        padding: 0 1rem;
      }
    }
   
    /* Tablet styles */
    @media only screen and (min-width: 768px) {
      @layer tablet {
        .container {
          max-width: 768px;
          margin: 0 auto;
        }
      }
    }
   
    /* Desktop styles */
    @media only screen and (min-width: 1200px) {
      @layer desktop {
        .container {
          max-width: 1200px;
          margin: 0 auto;
        }
      }
    }
   

3. Create fallback styles with a base layer:

    /* Base layer with fallback styles */
    @layer base {
      body {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
      }
      a {
        color: blue;
        text-decoration: none;
      }
    }
   
    /* Specific layer with additional styles */
    @layer specific {
      a {
        color: red;
      }
    }
   

---

CSS Cascade Layers is now supported by 90.19% of global browsers according to Can I use website.

This means that developers can start using this feature in their projects without worrying about browser compatibility issues.