CSSOM Construction

The browser parses CSS into a CSSOM (CSS Object Model) representation that describes the styles defined by stylesheets. The CSSOM is combined with the DOM to determine the computed styles used during rendering.

When the browser encounters CSS, it parses the stylesheet into an internal tree-like representation called the CSSOM. This structure represents rules, selectors, declarations, and their relationships so the browser can reason about which styles apply to elements.

The DOM represents document structure, while the CSSOM represents styling information. During rendering, the browser uses both to determine the computed style for each relevant DOM element, taking into account the cascade, inheritance, specificity, and applicable rules.

CSSOM construction is one part of the rendering pipeline rather than the entire styling process. A stylesheet must generally be parsed before its rules can participate in style calculation. External stylesheets can therefore affect when the browser has enough information to calculate styles and continue toward later rendering stages.

JavaScript can also interact with CSSOM-related APIs, such as `document.styleSheets` and stylesheet rule collections. These APIs expose portions of the browser's stylesheet model, although the browser's internal implementation can contain details that are not directly represented by the web platform APIs.

Key points

• CSS is parsed into a CSSOM representation.
• The DOM describes structure; the CSSOM describes CSS rules and styling information.
• The browser combines DOM and CSS information during style calculation.
• Cascade, specificity, and inheritance affect the resulting computed styles.
• CSSOM construction is distinct from layout, painting, and compositing.

Interview questions

What is the CSSOM?

CSSOM stands for CSS Object Model. It is the browser's representation of parsed CSS rules and stylesheets. The browser can use this information together with the DOM when calculating styles for elements. Web APIs such as `document.styleSheets` expose parts of this model.

How do the DOM and CSSOM work together?

The DOM describes the elements and their relationships in the document. The CSSOM describes the rules supplied by CSS. During style calculation, the browser considers both to determine which declarations apply and what each element's computed style should be.

Does building the CSSOM cause layout?

No. Building the CSSOM means parsing CSS into a representation of stylesheet information. Layout is a later rendering stage that determines the geometry of elements. Style calculation sits between these concepts because it uses document and stylesheet information to determine the styles that layout can consume.

Why can a stylesheet affect rendering progress?

The browser needs parsed stylesheet information to correctly calculate styles for affected content. An external stylesheet therefore represents a resource whose availability and parsing can matter to the rendering pipeline. The exact scheduling and optimization behavior depends on the browser and circumstances, so it is better to describe this in terms of required style information rather than assuming a single fixed pipeline timing.

What happens if JavaScript changes a stylesheet through the CSSOM?

Changing stylesheet rules through CSSOM APIs changes the browser's stylesheet state. The browser may then need to recalculate styles for elements affected by those rules. Depending on the change and what is affected, subsequent rendering work can include layout and painting. The performance impact therefore depends on the scope and nature of the change rather than CSSOM mutation alone.