Build the CSSOM and calculate styles

The browser can’t style an element until it has read the CSS. So it parses every stylesheet into a structure it can query, the CSSOM (CSS Object Model). Think of it as the DOM’s twin: a tree of rules instead of a tree of elements.

With the CSSOM in hand, the browser walks the DOM and, for each element, works out the computed value of every property. That means:

• matching selectors against the element
• applying the cascade to pick a winner when several rules match
• inheriting values from the parent where the property inherits
• resolving custom properties like var(--brand)
• converting relative units where it can

Some values can’t be final at this stage. A width: 50% needs the parent’s width, and that’s a layout question. Style calculation records the 50%, and layout turns it into pixels.

Stylesheets block rendering

An external stylesheet blocks rendering. The browser keeps parsing HTML, but it won’t paint the first frame until the CSS has arrived. Painting without styles and then repainting with them would produce a flash of unstyled content, so browsers wait.

This is why a slow stylesheet delays everything visible, even when the HTML arrived instantly. Keep the CSS needed for the first screen small and fast to load.

Selector cost

Not every rule matches every element, and browsers are good at skipping rules that can’t match. A huge stylesheet or frequent DOM changes do increase style calculation work. But the old advice about avoiding certain selectors is mostly folklore today. Record before you rewrite selectors.

See the cascade at work

Let’s take two rules with different specificity:

.card p {
  color: #333;
}

p {
  color: red;
}

Every p inside a .card is dark gray, not red, even though the p rule comes later. The first selector is more specific, so it wins the cascade.

Open the Elements panel, select one of those paragraphs, and switch to the Computed tab. Expand color and DevTools lists both declarations, with the losing one crossed out. That’s the cascade, made visible.

Then open the Performance panel, start recording, and toggle a class on the body. Look for Recalculate Style on the Main track. That entry is the browser redoing all the work above, for every element the change touched.