Layers decide before specificity does in CSS

A layer's order beats every selector inside it, which is how you keep a reset from fighting a component.

@layer reset, base, components, utilities;

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

@layer base {
  body { font-family: system-ui, sans-serif; }
}

@layer components {
  /* wins over the reset even though it is no more specific */
  .card { margin: 1rem; padding: 1rem; }
}

@layer utilities {
  .flush { margin: 0; }
}

How it works

1. @layer names the order once, at the top, before any rule.
2. A rule in a later layer wins even against a more specific earlier one.
3. Unlayered styles beat every layer, so leave the last word for them.

Keywords and builtins used here

• card
• flush
• layer
• margin
• padding
• rem

The run, in numbers

Lines

18

Characters to type

306

Tokens

69

Three-star pace

70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 59 seconds.

Type this snippet

Step 3 of 3 in The cascade, step 9 of 26 in Selectors & the box model.

← Previous Next →