Speed of CSS

Question

This is just a question to help me understand CSS rendering better.

Lets say we have a million lines of this.

<div class="first">
    <div class="second">
        <span class="third">Hello World</span>
    </div>
</div>

Which would be the fastest way to change the font of Hello World to red?

.third { color: red; }
div.third { color: red; }
div.second div.third { color: red; }
div.first div.second div.third { color: red; }

Also, what if there was at tag in the middle that had a unique id of "foo". Which one of the CSS methods above would be the fastest.

I know why these methods are used etc, im just trying to grasp better the rendering technique of the browsers and i have no idea how to make a test that times it.

UPDATE: Nice answer Gumbo. From the looks of it then it would be quicker in a regular site to do the full definition of a tag. Since it finds the parents and narrows the search for every parent found.

That could be bad in the sense you'd have a pretty large CSS file though.

Answer 1

Two things to remember:

• This is going to depend on the CSS parser /rendering engine: i.e. it varies from browser to browser.

• CSS is really, really, really fast anyway, even at it's slowest the human watching shouldn't notice

In general the simplest things are the fastest (as Gumbo nicely illustrates), but because we're already in such a fast environment don't think that you should sacrifice clarity and appropriate scoping (low specificity is like making everything public sort of). Just avoid * wherever you can :)