The Beginners Guide to CSS Object Model (CSSOM)

A lot happens between the first HTTP request and the final delivery of a web page. Data transmission and the browser’s rendering pipeline require a lot of different technologies, one of them is the CSS Object Model, or the CSSOM.

The CSS Object Model takes the CSS code, and renders every selector into a tree structure for easier parsing. Perhaps it’s not crucial for developers to fully understand this concept, but it’s a valuable topic to study if you want to learn more about how browsers render code into a working website.

In this post, I’m going to cover the basics of the CSS Object Model, and show you how it works.

What Is CSSOM?

The term CSS Object Model describes a map of all CSS selectors & relevant properties for each selector. These styles can be root elements or have nested children.

CSSOM is very similar to the DOM in HTML, which stands for Document Object Model. Both of them are part of the critical rendering path which is a series of steps that must happen to properly render a website. All these processes happen automatically, behind the scenes.

So why is CSSOM important? It’s the map used by the browser to properly render CSS styles on a web page. There’s no easy way to tell a computer that all paragraphs in a .main-content div must have extra line-height.

The solution is the CSS Object Model which maps out all elements and properties from your CSS code.

CSSOM makes it easier for the browser to render styles on the page. The whole thing is very technical but it’s worth understanding a little about the process, especially if you build websites.

How It Works

Both the DOM and CSSOM are used extensively by all web browsers to interpret and render web pages. The diagram below is from Google Developers Web Fundamentals guide, and explains how the DOM is rendered in a web browser.

In both the DOM & CSSOM, all information is converted from bytes into digital maps that render every element in a web document. The process works as follows:

1. The browser downloads the HTML for a web page.
2. While processing the HTML, the parser may bump into a link element referencing an external stylesheet.
3. This CSS stylesheet is then parsed into a map using the CSS Object Model specs.
4. The resulting code can then be applied to elements in the DOM.

All of this happens very quickly, and occurs with every single page request. This other diagram below showcases an example tree structure of the CSSOM.

Notice how some properties in the diagram have lighter grey font colors. These properties are inherited from the parent. Since the body has a specific font size, all elements within the body also get that font size unless it’s overridden.

HTML and CSS strings are converted into tokens which can then be understood as nodes by the browser. These nodes are like objects within the tree structure that defines how the entire page should be constructed.

The CSSOM and DOM are completely separate data models, therefore they’re parsed separately of each other. But they both have similar tree structures, and both serve the same purpose: giving the browser a structure to render and identify different elements on the page.

Why Web Developers Should Care

Since all of the rendering happens on the backend, you really don’t need to worry much about the CSSOM tree. But it can be useful to understand how it works.

One thing to remember is that the CSSOM must be fully loaded before the web page will be displayed, as it will define how every element on the page should look like. If the page loaded before the CSSOM, it would appear as plain HTML first, followed by the styles a few seconds later.

Browsers specifically avoid that because it would be confusing to end users. And it’s worth noting that the CSSOM cannot be cached; it must be recreated on each page.

Actual CSS files can be cached in order to load the assets quicker but rendering a page in the browser always requires running the CSSOM parser. This also means that JavaScript can have a negative impact on rendering and performance.

I would highly recommend reading this article to learn more about external CSS/JS resources and their load times.

The best way to optimize your site is by crafting a natural cascade of resources which are loaded in tandem.

It is possible to manipulate the CSSOM using JavaScript because it is technically a JS API. But it doesn’t serve much of a purpose compared to JavaScript DOM manipulation.

The bigger reason to learn about the CSSOM is to further educate yourself regarding how websites actually work.

There are lots of things we take for granted that keep the Internet running smoothly. When you understand a little more about the entire process you can visualize how the whole thing comes together, and hopefully gain some appreciation for the existence of the World Wide Web.

Further Reading

I hope this intro can give you a solid idea of what the CSS Object Model is, and how it affects web pages. There isn’t much to manipulate in the CSSOM, so it differs a bit from the DOM.

However it’s still a critical technology in web development, and it should clarify major aspects of browser rendering.

There are many other resources discussing the CSSOM, and how it works. If you’re looking to learn more, here are some posts I recommend:

• CSS Object Model Overview
• Exploring the CSSOM: Making a CSS Object Analyzer
• What Every Frontend Developer Should Know About Webpage Rendering