Neon DistrictISSUE #43 of 50

@layer · cascade layers

PrismaVSJank the Janitor

Prisma says@layer defines cascade layers so you control which styles win regardless of specificity.

Cascade layers group rules into named @layer base, components, utilities and order them explicitly — later layers beat earlier ones regardless of selector specificity. This tames the specificity wars between resets, frameworks, and your overrides. Unlayered styles win over all layers.

Power-ups you unlock

@layer orders groups of rules explicitly
Later layers beat earlier ones, ignoring specificity
Great for reset → framework → app ordering
Unlayered styles outrank all layers

Jank the Janitor attacks — common mistakes

Expecting specificity to matter across layers
Forgetting unlayered rules sit on top
Declaring layer order after rules used them

Boss battleDefine base and app layers; show a low-specificity override beating a high-specificity base rule.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>@layer base,app;@layer base{#id{color:#ff7a8a}}@layer app{p{color:#8aff9d}}</style></head><body style="background:#06040d;padding:20px"><p id="id">app layer wins despite #id specificity</p></body></html>

▶ Open the interactive comic issue

‹ @Import · Loading Stylesheets Nesting · Native Css Nesting ›