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

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.