Home/ Questions/Q 6223125
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T08:26:01+00:00

While this could possibly result in a simple yes or no answer I’ll go

  • 0

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:

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 😀 )

    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.

    • 0