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.

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.