The problem
Big sites have thousands of rules written by many people. Here two of them set the colour of one heading, Fresh tea: an old page rule, #shop h2, and the card component's rule, .card__title.
With no plan, the browser compares specificity: ids count most, then classes, then tag names. #shop h2 scores 1,0,1 and .card__title scores 0,1,0, so the id rule wins and the heading turns navy.
Names and tokens
A naming plan keeps scores flat. BEM names a block (card), its elements (card__title) and variants (card--sale). Each part is styled with one class, so no rule needs an id to win.
A design token is a named value kept in one place. --brand is a custom property set on :root, the page's root element. Every element inherits it, and any rule can read it with var(--brand).
Cascade layers
Cascade layers let you choose the order. @layer base, components; creates two layers. Order is set by first mention: base first, components second. A later layer beats an earlier one.
@layer components { … } wraps the card's rule. The heading stays navy: #shop h2 is still outside every layer, and styles outside every layer beat all layered ones.
Now @layer base { … } wraps the old rule too. Both rules are layered, and layers are compared before specificity. The components layer was named second, so it wins: the heading turns teal, although #shop h2 scores higher.
One token, every part
var(--brand) is not a colour by itself. The browser looks up --brand on the heading, finds teal inherited from :root and puts it in place. Every rule using var(--brand) gets the same teal.
Now change one line: --brand: tomato. The token updates and the heading follows, without touching the component rule. On a large site, every part that reads var(--brand) changes together.
What happens
;; step 1/9 · collide the heading in index.html #shop › .card › h2.card__title two rules match it, both set color #shop h2 color: navy .card__title color: var(--brand) which one wins?
A real browser runs the whole cascade at once, for every element and property. The figure splits it into steps: the first steps show the sheet without its layer lines, and the heading starts in the browser's default black until the first comparison. From then on, after every step the heading shows the colour a real browser would give that sheet. Styles outside any layer beat every layered style. That is why the heading stays navy while only components is wrapped, why the token on line 1 can stay unlayered, and why a site moving to layers puts its old rules in an early layer, as base is here. Wrap base first instead and the unlayered card rule would win at once.