Cascade Layers

Layer order should control CSS precedence intentionally — not selector escalation wars.

01 — Purpose

Predictable CSS ordering

Cascade layers reduce specificity wars — layer order should control precedence, not selector escalation.

Without layers, teams fight with ever-longer selectors and !important. @layer lets you declare precedence once so overrides stay intentional and readable.

This site uses LSCSS — see CSS standard and CSS architecture for how layers fit the wider system.

02 — Principles

Order beats escalation

Declare layer order intentionally — then place files in the right layer.

  • unlayered CSS still overrides layered CSS — know that rule and use it on purpose
  • lower layers provide defaults; higher layers refine — not the reverse
  • avoid fighting layers with specificity — if you need to, the layer order is wrong

03 — Structure

Layer order on this site

Match the order declared in your entry file — on Frontend Foundations:

  • legacy — vendor CSS, old frameworks, third-party sheets (sometimes called thirdparty in other LSCSS setups)
  • settings — tokens, fonts, breakpoints
  • base — reset, typography defaults
  • utilities — single-purpose helpers
  • layout — page shell, containers
  • components — UI blocks
  • theme — colour and theme overrides
  • hacks — documented exceptions only 
@layer legacy, settings, base, utilities, layout, components, theme, hacks;

@import './legacy/vendor.css' layer(legacy);
@import './settings/tokens.css' layer(settings);
@import './components/card.css' layer(components);

04 — Benefits

What layers buy you

Less !important, clearer overrides, safer scaling.

  • predictable overrides — utilities can beat components without specificity hacks
  • reduced !important usage across the codebase
  • clearer ownership — new files land in the right folder and layer
  • safer third-party CSS — isolate vendor styles in the legacy layer until migrated

05 — Close

Reduce conflict, not add ceremony

Layers should simplify decisions — if the layer list grows past comprehension, simplify the system.

Start with a small, documented layer stack. Add layers when you have a recurring conflict pattern — not preemptively for every folder.

Related: design tokens, container queries.