CSS & CSSOM

Cascade, specificity, inheritance and computed style as a resolution algorithm you can reason about, rather than a fight you win with `!important`.

The CSSOM

Stylesheet bytes become an indexed object model before they become style: how rules are stored for fast lookup, why CSS blocks rendering, and what each runtime way of changing style actually costs.

Q · What does the browser build out of my stylesheet, and why does that structure decide when the page can paint?
The Cascade
▶ lab

Origin and importance, then context, then element-attached styles, then layers, then specificity, then order — a six-step sort that decides every property on every element, in that order.

Q · When two declarations both apply to an element, which one wins, and at which step of the sort did the other one lose?
Specificity
▶ lab

A three-part tuple compared left to right, not a score. What counts, what deliberately counts as zero, and how `:where()` and `:is()` turn specificity into something you choose.

Q · How exactly does the browser compare two selectors, and how do I stop that comparison from being an argument?
Inheritance and Computed Style

From declared value to cascaded, specified, computed, used and actual value — which properties inherit, what `inherit`, `initial`, `unset` and `revert` each mean, and why reading style back can force layout.

Q · After the cascade picks a winner, what does the browser actually store on the element — and why is that not the number I see on screen?
Custom Properties

Inherited properties holding a token stream, substituted at computed-value time — which makes them dynamic, scopeable per element, and capable of invalidating a very large subtree at once.

Q · What is a CSS custom property actually — a variable, a property, or something the cascade participates in — and what does changing one cost?
Selector Matching Cost

How matching actually works, why selector performance is almost never the bottleneck in a modern engine, and what the real cost is: how many elements a change forces the browser to restyle.

Q · Do my selectors make style calculation slow — and if not, what does?