What is the CSS Object Model (CSSOM)?

What is the CSSOM?

The CSS Object Model (CSSOM) is the browser's in-memory representation of all the CSS that applies to a page, plus a set of JavaScript APIs to read and change it. It is the style counterpart of the DOM: the DOM describes the content, the CSSOM describes how that content is styled. See the MDN reference.

How it works

While the browser parses HTML into the DOM, it also parses every stylesheet it finds into the CSSOM. The two combine into the render tree, which holds only the visible nodes and the styles that apply to each. The browser then lays out and paints that tree. This sequence is the critical rendering path.

One difference matters for speed. DOM construction is incremental, but the CSSOM is not used until all of it is parsed, because a later rule can override an earlier one. That is why CSS is render-blocking by default: the browser will not render processed content until the CSSOM is built.

Example

A page links one large stylesheet in the head. The HTML arrives quickly, but the stylesheet takes much longer, so the screen stays blank until it finishes. Splitting out styles used only for print or large screens, with a media attribute such as media="print", stops them blocking the first render. The browser still downloads them, at lower priority.

Reading and changing styles from JavaScript

• document.styleSheets and CSSStyleSheet let you inspect and edit rules.
• element.style sets inline styles.
• getComputedStyle() returns a live, read-only object with the resolved values after stylesheets are applied.

Common mistakes

• Shipping one huge stylesheet: everything in it blocks the first paint. Keep critical CSS small and mark the rest non-blocking with media queries.
• Reading and writing styles in a loop: reading a layout value such as offsetHeight right after changing a style forces the browser to run layout at once. Repeated in a loop this is called layout thrashing. Batch your reads first, then your writes.
• Toggling many properties one by one: change a class once instead.
• Late-loading CSS: styles that arrive after content can shift the layout, which hurts Cumulative Layout Shift.

CSSOM and performance measurement

A slow CSSOM delays first paint and, with it, metrics such as Largest Contentful Paint. See rendering for the wider picture. To watch these numbers, page speed monitoring tracks Lighthouse scores and Core Web Vitals on a schedule and can alert you when they regress, and the Core Web Vitals checker gives a quick one-off reading. For next steps, read how to improve your website speed and how to monitor Core Web Vitals.

FAQ: CSSOM

What is the difference between the DOM and the CSSOM?

The DOM is a tree of the page content (elements and text). The CSSOM holds the style rules. The browser combines both into the render tree it uses to lay out and paint the page.

Is CSS render-blocking?

Yes, by default. The browser does not render processed content until the CSSOM is built. Stylesheets with a media type or query that does not match, such as print styles, do not block the first render.

Does getComputedStyle change styles?

No. It returns a live, read-only object with the resolved values. To change styles, use element.style, classes or the stylesheet APIs.

Does the CSSOM include styles with display: none?

The CSSOM holds the rules. The render tree is what leaves out elements with display: none and their descendants.