Engrain by ByteRush

WEB.08.01 Mid-level· 11 minCore — asked often

The cascade, specificity and inheritance: why that color won

The real order the cascade uses (origin and importance, layers, specificity, scope, order), how to calculate specificity, why !important flips layer order, and inherit, initial, unset, revert and revert-layer.

Comes up in: Web fundamentals, Recruiter screen

Learn#

Tara adds button { color: gray } at the end of her CSS to fix one page, and every button on the site turns gray, even #buy, which has an ID. Her teammate had moved the old styles into @layer.

The cascade is the algorithm that picks one value when several rules set the same property. It compares, in this order, stopping at the first difference:

  1. Origin and importance: browser, user or site styles, and !important.
  2. Context: styles inside a shadow tree versus outside.
  3. Cascade layer: later layers beat earlier ones, and unlayered styles beat all layers.
  4. Specificity: how precise the selector is.
  5. Scope proximity: with @scope, the closer scope wins.
  6. Order of appearance: the later rule wins.
@layer base, components;
@layer base { #buy { color: green; } }
@layer components { .btn.primary { color: blue; } }
button { color: gray; } /* unlayered: wins */
Layers are compared before specificityStep 1 of 4

State

  • #buy (layer: base)
  • .btn.primary (layer: components)
  • button (unlayered)

Three rules set the button's color. Step 1: origin and importance. All three are normal author styles, so it is a tie.

Read the steps as text
  1. Three rules set the button's color. Step 1: origin and importance. All three are normal author styles, so it is a tie.
  2. Step 2: cascade layers. Unlayered styles beat every layer, so the plain button rule wins over both layered rules.
  3. Specificity was never compared: #buy has (1,0,0), but layers are checked first.
  4. If all three were in one layer, specificity would decide: #buy (1,0,0) beats .btn.primary (0,2,0) beats button (0,0,1).

Predict#

Predict first

Two rules, same layer: .card .title { color: red } and h2.title { color: blue }, on <h2 class='title'> inside .card. Which wins?

Interview angle#

Say it like this — about 30 seconds

“Specificity is three numbers, compared left to right. First IDs. Then classes, attributes and pseudo-classes. Then element names. The star and combinators add nothing, and :where adds zero. But the cascade checks origin, importance and layers first. Layers let me order groups of styles, such as reset, base and components. A later layer wins whatever the specificity, and unlayered styles beat all layers.”

Stays on your device. Nothing is uploaded.
Follow-up How is specificity calculated?
Count (IDs, classes + attributes + pseudo-classes, types + pseudo-elements) and compare left to right; :where adds zero and :is/:not/:has use their most specific argument.
Follow-up What are cascade layers and what problem do they solve?
@layer groups styles into ordered layers; later layers win regardless of specificity, which ends specificity wars between resets, libraries and app styles.
Follow-up Why does !important flip layer order?
Important declarations reverse the normal order, so an important rule in an early layer, such as a reset, beats important rules in later layers.

Practice#

Guided

Write a specificity calculator and comparator that handle :where, :is, :not and :has.

Done when

  • IDs, classes, attributes, pseudo-classes, types and pseudo-elements are counted in the right column.
  • * and combinators count nothing, and :where(...) counts nothing.
  • :is, :not and :has count as their most specific argument.
Your solution
Ctrl/⌘ + Enter

Remember#

Try to answer each card before you open it. Then add them to your reviews.

Which comes first in the cascade: layers or specificity?

Layers. Specificity only decides within the same layer.

What is the specificity of .card .title?

(0,2,0)

Do unlayered styles beat layered ones?

Yes, for normal declarations.

What does revert-layer do?

Rolls the value back to what earlier layers would give.

Go deeper

Four layers. Stop at the one your interview needs; each ends with a quick check.

The core ideaEvery round
Inheritance means a child takes a value from its parent when no rule sets it. Text properties such as color and font-size inherit. Box properties such as margin and border do not.
Check yourself: Is color inherited? Is border?

color is inherited; border is not.

How it works underneathSenior rounds
inherit copies the parent’s value. initial uses the default from the spec. unset inherits if the property normally does, and acts like initial if not. revert goes back to the browser’s own style, and revert-layer to earlier layers.
Check yourself: What does unset do for a non-inherited property?

Acts like initial.

Edge cases and trapsWhere people slip
For !important, the order flips. Important rules in earlier layers beat those in later layers, and layered ones beat unlayered ones. So a reset can protect a few key rules .
Check yourself: Which wins: an important rule in layer base or one in layer utilities?

The one in base: important reverses layer order.

In productionStaff-level answers
Declare the layer order once at the top, such as @layer reset, base, components, utilities;. Keep selectors short and low in specificity. @layer support: Chrome 99, Firefox 97, Safari 15.4 .
Check yourself: What layer order do many design systems use?

reset, base, components, utilities.

Finished the five steps? Mark it, and its cards join your reviews.

Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

Interview questions this answers

  • How is specificity calculated?
  • What are cascade layers and what problem do they solve?