What are CSS layers and the @layer rule

Short answer

@layer defines cascade layers that group styles by priority. Styles in a higher layer override styles in a lower layer, regardless of specificity.

How it works

You declare layers in order of priority. Any styles inside a layer are less specific than unlayered styles, and later-declared layers win over earlier ones.

Example

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer utilities {
  .hidden { display: none !important; }
}

Why it matters

Layers solve specificity wars by making precedence explicit. They are ideal for design systems, third-party CSS, and large teams where multiple sources contribute styles.

Tips

• Import external CSS into a named layer with @import url(...) layer(name).
• Unlayered styles always beat layered styles.
• Use layers alongside specificity, not as a replacement for clean selectors.