The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Declare layer order | @layer reset, base, components, utilities; | View examples |
| Add rules to a layer | @layer components { .button { color: white; } } | View examples |
| Layer an import | @import url('vendor.css') layer(vendor); | View examples |
| Match with zero specificity | :where(nav a) { color: inherit; } | View examples |
| Use strongest branch specificity | :is(#app, .shell) button { padding: .5rem; } | View examples |
| Force inheritance | button { font: inherit; } | View examples |
| Use property initial value | .panel { display: initial; } | View examples |
| Inherit or initialize | .item { color: unset; } | View examples |
| Roll back the current origin | .widget { all: revert; } | View examples |
| Roll back the current layer | .button { color: revert-layer; } | View examples |
| Mark an important declaration | .sr-only { position: absolute !important; } | View examples |
The cascade selects one declared value before inheritance and defaulting produce a value for every property. Organize author rules into intentional layers, keep selectors easy to override, and treat !important as a narrowly scoped exception rather than a specificity strategy.
Step by step
Detailed examples
Design layer order before component rules
For normal author declarations, unlayered rules outrank layered rules and later layers outrank earlier ones. Important declarations reverse layer priority. Declare a stable order once, put third-party CSS in a low layer, and avoid leaving routine application rules unlayered by accident.
@layer vendor, reset, base, components, utilities;
@import url('/vendor.css') layer(vendor);
@layer base { body { color: #1e293b; } }
@layer components { .button { color: white; background: #2563eb; } }
@layer utilities { .text-danger { color: #b91c1c; } }Keep specificity low and intentional
Specificity compares ID, class/attribute/pseudo-class, and type/pseudo-element columns only after origin, importance, layer, and encapsulation order. :where() always contributes zero; :is(), :not(), and :has() take the strongest argument. Source order breaks ties.
@layer components {
:where(.card) { padding: 1rem; color: #334155; }
}
@layer utilities {
.compact { padding: .5rem; }
}Know which values inherit
Text properties commonly inherit; layout and box properties commonly do not. inherit forces the parent value, initial uses the property's defined initial value, and unset selects between those behaviors. The all shorthand resets most properties but not custom properties or direction-related exceptions.
button, input, select, textarea { font: inherit; color: inherit; }
.component-reset { all: unset; display: block; }Roll back without guessing old values
revert rolls the declaration back to a lower-priority origin, often exposing user-agent or user styles. revert-layer rolls back only the current cascade layer, revealing an earlier layer or origin. These differ from initial, which may discard useful platform defaults.
@layer base, components, utilities;
@layer components { .button { color: white; } }
@layer utilities { .button.quiet { color: revert-layer; } }Reserve important declarations for defined contracts
!important participates before specificity and reverses layer order, making earlier important layers stronger. It can be appropriate for user overrides, safety utilities, or integration boundaries. Do not use it to compensate for uncontrolled selectors; first inspect origin, layer, and specificity in developer tools.
@layer important-overrides, base, components;
@layer important-overrides {
.visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; }
}Local code tester
Explore cascade layers
Reorder layers and adjust selector specificity to see which declaration wins.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.