How do cascade layers work?

The @layer rule creates named layers. Their order is established the first time they are declared, not by where individual rules appear later. That gives you control over the cascade without inflating specificity.

@layer reset, base, components, utilities;

@layer base {
  a {
    color: blue;
  }
}

@layer components {
  .button {
    color: white;
  }
}

The rules

• Layer order is determined by first declaration of each layer
• For normal declarations, later layers override earlier layers
• Unlayered normal declarations override all layered normal declarations
• For important declarations, the order reverses: earlier layers win
• Nested layers are scoped inside their parent layer
• Layers do not replace specificity; they sit above it in the cascade

Layers are useful for resets, third-party CSS, component libraries and utilities. You can put a vendor stylesheet in a low-priority layer and override it with your own component layer without writing more specific selectors.