Does the order of rules in a CSS stylesheet affect rendering speed?

Question

While this could possibly result in a simple yes or no answer I'll go for it anyway

Consider the following example:

HTML

<html>
    <head>
    </head>
    <body>
        <div class="foo">
            <span class="bar">Hello world!</span>
            <p>Some really interesting text.</p>
        </div>
    </body>
</html>

CSS

html {
    /* some css */
}
body {
    /* some css */
}
div.foo {
    /* some css */
}
div.foo span.bar {
    /* some css */
}
div.foo p {
    /* some css */
}

Will the order in which css rules appear, have any effect on how (fast) the browser can render the page? ( in this example it won't really matter, but consider a real website with loads of html and css )

So the above css script will render faster or easier for the browser than :

div.foo p {
    /* some css */
}
div.foo span.bar {
    /* some css */
}
div.foo {
    /* some css */
}
body {
    /* some css */
}
html {
    /* some css */
}

Do browsers care? Should we?

Read before asking:

At the end of the day it doesn't matter, because you can't always follow the class order in your html, can you? — jackJoe, Aug 04 '11 at 15:30
Code readability should always matter, so the structure of your CSS files should matter too. I'd go with the structure that is the easiest for others to read (and, in turn, maintain) rather than worry about any potential (but likely insignificant) performance gains. — Anthony Grist, Aug 04 '11 at 15:35
In my case, I combine several CSS files each time the minified master is built, in the order I choose, so I think this is relevant although this not a great example. Cascading rules are considered, but there is a lot that's left to decision making, that won't affect anything (Do I include the "icon" CSS first or the "form" CSS?). Code readability is also not sacrificed here. I don't agree with everyone dismissing the actual question. — Wesley Murch, Aug 04 '11 at 15:44

Jason McCreary · Answer 1 · 2011-08-04T15:36:11.313

6

I can't speak to order of the rules as it relates to speed.

However, as CSS stands for Cascading Stylesheets I consider it a moot point as the order of your rules does matter. So you aren't necessarily at liberty to move them around freely. Unless of course you supply continually more specific selectors (i.e. html body div.foo), which I think would have performance implications. If nothing else in file size.

In the end, remember that premature optimization is the root of all evil. Furthermore, there are other things that will have greater effect on speed (minification, static domain, etc) than rule order. Not to mention there is something to be said for code readability.

edited Aug 04 '11 at 15:36

answered Aug 04 '11 at 15:31

Jason McCreary

71,546
23
135
174

It doesn't matter in every case. – Wesley Murch Aug 04 '11 at 15:32
true, but you can't follow the same structure that you have on the html, that's insane, but the order of the class do matter, and your remark about the *cascading* says it all, nice one. – jackJoe Aug 04 '11 at 15:33
1

Currently I do have a basic ordering in my stylesheets, basically: most generic selectors first, more complicated below. I am simply wondering wether or not a browser cares about such a order or that it simply ignores it and reads the file as it sees fit. – Willem Aug 04 '11 at 15:36
1

For instance, what if you have layout-specific rules (widths, float, padding, margin, etc. for header, footer, content etc.). Putting them first or last won't matter if they aren't being overridden, and child elements will still inherit rules, but is it better to put these first or last? I would think first is better to prevent a massive repaint. – Wesley Murch Aug 04 '11 at 15:37
1

I thought copy-and-paste coding was the root of all evil. – Jay Aug 04 '11 at 15:39
To your comment: "premature optimization is the root of all evil" - That is true, but if you tend to be optimized in the first place, as a habit, then there is nothing evil about it. – Wesley Murch Aug 04 '11 at 15:39
@Wesley Murch, indeed. But I maintain that the user minifying their CSS is going to far outweigh CSS rule order. Jay, LOL. – Jason McCreary Aug 04 '11 at 15:46
See my comment above, on the question. – Wesley Murch Aug 04 '11 at 15:48
Wait, can you give me an example where ordering of the rules changes the final output? If I say "div {color: red;} div.blue {color: blue;}" or "div.blue {color:blue;} div {color: red:}" I get the same results. I don't think I've ever seen a case where re-arranging rules affected how the browser painted the screen. – Jay Aug 04 '11 at 15:51
Not to snipe, but it's funny that you say that re-arranging rules to improve performance is an evil premature optimization, but increasing the length of rules is bad because a bigger file will hurt performance. Wouldn't a concern about the length of the text of rules also be a premature optimization? – Jay Aug 04 '11 at 15:56
@Jay, I think you're focusing on the wrong part of the answer. My point was that it doesn't matter and in the end there are other more effective forms of optimization. – Jason McCreary Aug 04 '11 at 17:47

score 2 · Answer 2 · answered Aug 04 '11 at 15:33

It matters for the importance of your selectors, adding details such as classes or IDs or parent elements will increase the importance of that rule over others.

Also, it may or may not decrease the speed of the browser who have to interpret it, but for sure it will increase the size of your CSS file to download and possibly be cached (not all handheld devices cache files bigger than a specified size).

CSS selectors specificity

score 1 · Answer 3 · answered Aug 04 '11 at 15:32

It's typically not a good practice to strict type your classes and ID's to a specific element type.

div.foo {}

Will only work for Div's. Then you can't reuse that style elsewhere unless it's a Div element.

.foo { /* Base Style */ }
div.foo { /* Specific to if a DIV is used */ }

This is a slightly better approach.

score 1 · Accepted Answer · answered Aug 06 '11 at 00:38

After some more testing and reading I came to the following conclusion, no, it does not matter. Even after some ‘extreme’ testing, I could not find anything that supports the idea that the order matters.

There were no 'flashed of unstyled content' or the likes, it just took way longer to load the page ( way way longer :D )

Tests I ran I created a test page with 60.000 div elements, each having a unique ID attribute. Each of these ID’s had their own css rule applied to it. Below that I had a single span element with a CLASS attribute, which was also had a css rule linked to it.

These tests created a html file of 2MB with a corresponding css file of 6MB.

At first I attempted these tests with 1.000.000 divs and css rules, but Firefox did not approve and started crying, begging me to stop.

I generated these elements and their css with the following simple php snippets.

<?PHP

    for ($i = 0; $i < 60000; $i++) {
        echo "
#test$i {
    position: absolute;
    width: 1px;
    height: 1px;
    top: " . $i . "px;
    left: 0;
    background: #000;
} <br />
";
    }

?>

And

<?PHP

    for ($i = 0; $i < 60000; $i++) {
        echo "
<div id=\"test$i\"></div>
";
    }

?>

The result was put in a html and css file afterwards to check the results.

Mind you, my browser ( Firefox 5 ) really did not appreciate me playing around with this, it really had some issues generating the output, the occasional this program is not responding message was not afraid to show it's face.

These tests were ran on a localhost, ran by a simple XAMPP installation, it might be possible that external servers result in a different resultset, but I am currently unable to test that.

I tested a few variations on the above:

Placing the element before all the generated divs, in the middle and at the end
Placing the span’s css definition before, in the middle or at the end of the css file.

Oh and may I suggest: http://www.youtube.com/watch?v=a2_6bGNZ7bA while it doesn't exactly cover this question, it does provide some interesting details about how Firefox ( and possibly other browsers )work with the stuff we throw at it.

score 0 · Answer 5 · answered Aug 04 '11 at 15:38

The order doesn't matter in loading speed, it only matters when the styles cascade down, so you can't move them around willy-nilly. Using IDs may be faster than using classes, but you can only have one ID on a page. The best way to speed it up would be searching for things that have a class but are only used once, and changing it to an ID.

score -1 · Answer 6 · answered Aug 04 '11 at 15:33

-1

I'd say it's always best to order them in hierarchical order - so HTML is top, followed by body, followed by it's child rules.

answered Aug 04 '11 at 15:33

ancilla

39
5

+1 to this as this is how i usually approach my sites. Though I tend to lead with a reset. – zik Aug 04 '11 at 15:40
What's the 'right' hierarchical order of `p` versus `div`? Or `dfn` versus `abbr`? – Volker E. Oct 02 '13 at 01:22

Does the order of rules in a CSS stylesheet affect rendering speed?

6 Answers6

Linked