`@layer` ordering

Try: Inspect—the green “utilities” layer wins over the indigo “theme” layer because layer order is declared, not source order alone.

Layer cake. Use named layers in design systems so utilities and themes don’t fight with specificity hacks.

Source

<div class="demo-box">…</div>

@layer theme, utilities;
@layer theme {
  .demo-box {
    border: 2px solid #6366f1;
    background: #eef2ff;
  }
}
@layer utilities {
  .demo-box {
    border-color: #059669;
    background: #ecfdf5;
  }
}

Support: @layer is Baseline in modern browsers.

@layer ordering

Source

`@layer` ordering