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>

In this case, if you want to display your paragraph in red instead of green, you can either change the order of the style rules, 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

For 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:

More Examples:

Now, let’s explore more examples to see how this works in practice.

Case 1:

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

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

in this case, priority-1 has the highest priority, hence, h4 will render in font-size : 15px;

Case 2 – declare nesting layers:

<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>

In this case, priority-1.priority-test2 has the highest priority, hence, h4 will render in font-size : 16px;

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

Case 3.1:

<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>

Un-layered styles will have the highest priority, h4 will render in font-size : 12px;

Case 3.2:

<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>

Un-layered styles will have the highest priority, h4 will render in font-size : 25px;

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	Chrome Android 99 WebView Android 99 iOS Safari 15.4 Firefox Android 97 Opera Android 68 Samsung Internet 18.0

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.