Every stylesheet eventually develops a monster: the rule that wins only because it arrived last with three IDs and an important. Cascade layers replace that folklore with an ordering you write down once.

@layer reset, base, components, utilities;

@layer base {
  a { text-decoration-thickness: from-font; }
}
@layer components {
  .card a { text-decoration: none; }
}
@layer utilities {
  .link-plain { text-decoration: none; }
}

The three rules that matter

  • Layer order is declared once, first: reset, then base, then components, then utilities. Later layers win regardless of specificity.
  • Unlayered styles beat everything layered, so a reset in a layer can never override a component outside one.
  • The !important relationship inverts: important styles in an earlier layer beat important ones in later layers, which is how reset-libraries survive your utilities.

Adopt it on an existing site

  1. Declare the order in a single line at the top of your entry stylesheet; nothing moves yet.
  2. Import each existing file into a layer: vendor code into low layers, your own code above it.
  3. Hunt the remaining !important rules and move them into the layer that makes them unnecessary; every one removed is a bug you will never debug again.
  4. Styles with no layer at all keep winning, so use that as your staging area during migration, then layer them after.

Layers ship everywhere modern, and the failure mode outside support is benign: files just cascade the old way. This site leans on it in spirit with a short stylesheet and no utility pile, but for any project that loads two frameworks and its own theme, layers are the quiet upgrade, and the debugging relief is gacor.