How CSS Becomes Pixels

How Browsers Turn CSS into Pixels

Browsers and Engines traced the whole rendering pipeline. For CSS work, what matters is what re-runs after a change: a new class, a :hover, an animation frame. The browser redoes work from the earliest stage the change invalidates, so the property you change sets the cost.

What a CSS change re-runs: geometry changes pay for every stage, transform and opacity only for compositing
What a CSS change re-runs: geometry changes pay for every stage, transform and opacity only for compositing

Style recalculation recomputes values for elements whose matching rules changed; toggling a class on <body> can touch every element. Layout (reflow) recomputes box sizes and positions, and one width change can move everything after it. Paint re-records drawing commands for the affected area. Composite combines already painted layers, can run off the main thread, and is all a transform or opacity change needs.