The rendering pipeline
Build the CSSOM and calculate styles
Understand why CSS must be parsed before the browser can know which rules and inherited values apply to each element.
8 minute lesson
The browser parses CSS into rules it can match against the document.
For each relevant element, it resolves selectors, the cascade, inheritance, custom properties, and computed values. A declared width such as 50% may still need layout before it becomes a pixel size.
External stylesheets normally block rendering because the browser needs their rules before painting a stable result. HTML parsing can continue, but the first styled frame may wait.
Not every CSS rule matches every element. Large stylesheets and frequent DOM changes can increase style-calculation work, but selector folklore is not a substitute for a recording.
Use the Elements panel’s Computed view to trace a final value back to its declarations. Then use the Performance panel to find Recalculate Style activity after changing a class.
Exercise: create two rules with different specificity, inspect the winning computed value, and explain how the cascade produced it.
Lesson completed