How @layer CSS helps resolve cascade conflict

1. Problem
2. Solution
3. More Examples
4. Browser Compatibility for @layer
5. Summary

It’s time to said goodbye to !important hacks

Traditionally, if you have more than one similar CSS rule applied to the same element, the one that comes later will overwrite the precedence.

For example:

<style>
    h4 {
       color: red;
    }
    h4 {
       color: green;
       background: black;
    }
</style>
<h4>
    This is a paragraph.
</h4>

Result:

This is a paragraph.

If you want to display your paragraph in red color instead of green color, either the ordering of the style rules to be changed or use color: red !important;.

For example:

h4 {
   color: green;
   background: black;
}
h4 {
  color: red;
}

h4 {
  color: red !important;
}
h4 {
   color: green;
   background: black;
}

Problem:

This scenario may be considered a cascade conflict and is perfectly manageable if you only have a few lines of CSS.

But in a real-life scenario where you manage a thousand lines of CSS, this will become very disorganized and tiresome.

Solution:

@layer CSS allows developers to have full control over the priority of the CSS rules without relying on the specificity or !important hacks

Quick example:

<style>
   /* declare layer ordering, from lowest to highest priority */
   @layer standard, mytheme ;

   /* declare layer */
   @layer mytheme {
     h4 {
       color: red;
     }
   }
   /* declare layer */
   @layer standard {
     h4 {
       color: green;
       background: black;
     }
   }
   
</style>
<h4>
    This is a paragraph.
</h4>

In this case, the @layer standard is placed later than @layer mytheme. It may seem like it is supposed to have higher specificity and priority.

But since we have pre-defined layer ordering upfront (see highlighted line above), @layer mytheme will actually have higher priority than the @layer standard therefore h4 will be rendered in red.

Result:

This is a paragraph.

More Examples:

Case 1: h4 will render in font-size : 15px;

<style>
  @layer priority-2, priority-1;

  @layer priority-1{
    h4 { font-size: 15px; }
  }
  @layer priority-2{
    h4 { font-size: 20px; }
  }
</style>

Case 2 – declare nesting layers: h4 will render in font-size : 16px;

<style>
  @layer priority-2, priority-1.priority-test1, priority-1.priority-test2;
  
  @layer priority-1{
      @layer priority-test2{
        h4 { font-size: 16px; }
      }
      @layer priority-test1{
        h4 { font-size: 18px; }
      }
  }
  @layer priority-2{
      h4 { font-size: 20px; }
  }
</style>

Case 3 – Un-layered styles will have the highest priority:

Case 3.1: h4 will render in font-size : 12px;

<style>
  @layer priority-2, priority-1.priority-test1, priority-1.priority-test2;
  
  h4 { font-size: 12px; }

  @layer priority-1{
      @layer priority-test2{
        h4 { font-size: 16px; }
      }
      @layer priority-test1{
        h4 { font-size: 18px; }
      }
  }
  @layer priority-2{
      h4 { font-size: 20px; }
  }
</style>

Case 3.2: h4 will render in font-size : 25px;

<style>
  @layer priority-2, priority-1.priority-test1, priority-1.priority-test2;

  @layer priority-1{
      h4 { font-size: 25px; }

      @layer priority-test2{
        h4 { font-size: 16px; }
      }
      @layer priority-test1{
        h4 { font-size: 18px; }
      }
  }
  @layer priority-2{
      h4 { font-size: 20px; }
  }
</style>

Browser Compatibility for @layer

@layer is supported in most of the modern browser:

Desktop	Mobile
Chrome 99 Edge 99 Safari 15.4 Firefox 97 Opera 85 Internet Explorer	Chrome Android 99 WebView Android 99 iOS Safari 15.4 Firefox Android 97 Opera Android 68 Samsung Internet

source : https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#browser_compatibility

Summary

If you’re working on a small project and not required to be maintained often, it may seem not benefit much from using @layer.

However, for a large-scale project with long-term maintenance, having the option to control the priority of the CSS rules without agonizing over the specificity of CSS rules can be extremely helpful.