Cascade Layers

Cascade layers let you decide which groups of styles should win before selector specificity is even compared. This makes large CSS systems much easier to reason about.

Why Layers Matter

Without layers, teams often fight style conflicts with:

• longer selectors
• more nesting
• extra overrides
• !important

Layers give you a cleaner tool for deciding priority.

Basic Example

@layer reset, base, components, utilities;

@layer base {
  button {
    font: inherit;
  }
}

@layer components {
  .button {
    background: #2563eb;
    color: white;
  }
}

@layer utilities {
  .bg-red {
    background: #dc2626;
  }
}

Because utilities comes after components, .bg-red can override the component background without needing a more specific selector.

Good Layer Strategy

A practical order is often:

1. reset
2. base
3. layout
4. components
5. utilities

Best Practices

• keep the number of layers small and purposeful
• use layers to control broad precedence, not every tiny decision
• combine layers with clear naming and component boundaries

Next Step

Continue to CSS Nesting to write related selectors more cleanly while keeping structure readable.