How is CSS processed?

Question

I'm trying to understand exactly how and in what order CSS is processed by the browser. I already know CSS is read from right to left, but more specifically, I want to know if:

The browser goes through each element in the DOM, and for each element, scans through the CSS rules to find which style matches?...or if:
The browser goes through each CSS rule and for each selector, scans through the DOM to find a DOM element that matches that selector?

(Or perhaps this even varies between browsers?)

If you look at a page with any DOM inspection tool, you'll see that every element gets properties assigned to it. I think that's how they do it. I don't think the browser maintains a table of selectors and which elements are assigned to which selector. — Mr Lister
– Mr Lister, Commented Jan 11, 2013 at 18:00
So what's the question? What are you going to use this knowledge for? — Mr Lister
– Mr Lister, Commented Jan 11, 2013 at 18:01
This is an important question. Knowing how a browser processes CSS will allow you write it efficiently — Lee Gunn
– Lee Gunn, Commented Jul 17, 2016 at 20:44

zneak · Accepted Answer · 2013-01-11 18:03:00Z

As far as I know, this is not defined by the CSS standard, which only specifies results, not means to reach them. Since both "algorithms" would give you the same visual output, they should both be valid implementations, assuming they also take into account the dynamic nature of webpages (that is, elements may move, be added, modified or deleted nearly any time by Javascript and this may change the CSS rules they match, or even that other elements match).

This should be implementation-dependent. Different browsers don't have to all do it the same way. Rest assured, though, that competition in the browser space is fierce enough that you shouldn't have to worry about the performance implications of setting a CSS rule.

+1 for "competition in the browser space is fierce enough that you shouldn't have to worry about the performance implications of setting a CSS rule"

justacoder · Accepted Answer · 2013-01-11 20:11:28Z

One thing to note about CSS processing heirarchy is when linking to CSS files.

A stylesheet called with link will load sooner:

<link rel='stylesheet' type='text/css' href='foo.css'>

than a stylesheet called with @import:

<style> @import url('foo.css'); </style>

This is a very simplistic example, but you get the point. You can read much more here: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Collectives™ on Stack Overflow

How is CSS processed?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related