Order Matters

In large projects, styles often conflict. Cascade Layers allow grouping CSS into layers and explicitly specifying which layer is more important, regardless of selectors.

How It Works:

You create layers at the beginning of the file:

@layer reset, base, components, utilities;

@layer components {
  .button { background: blue; } /* Components layer */
}

@layer utilities {
  .bg-red { background: red; } /* Utilities will always defeat components */
}