title: Does the order of rules in a CSS stylesheet affect rendering speed?
body: <p><em>While this could possibly result in a simple yes or no answer I'll go for it anyway</em></p>
  
  <hr>
  
  <p>Consider the following example:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="foo"&gt;
              &lt;span class="bar"&gt;Hello world!&lt;/span&gt;
              &lt;p&gt;Some really interesting text.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html {
      /* some css */
  }
  body {
      /* some css */
  }
  div.foo {
      /* some css */
  }
  div.foo span.bar {
      /* some css */
  }
  div.foo p {
      /* some css */
  }
  </code></pre>
  
  <p>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 )</p>
  
  <p>So the above css script will render faster or easier for the browser than :</p>
  
  <pre><code>div.foo p {
      /* some css */
  }
  div.foo span.bar {
      /* some css */
  }
  div.foo {
      /* some css */
  }
  body {
      /* some css */
  }
  html {
      /* some css */
  }
  </code></pre>
  
  <p>Do browsers care?
  Should we?</p>
  
  <hr>
  
  <p><strong>Read before asking:</strong></p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/182528/is-this-how-you-would-structure-your-css-stylesheet">Is this how you would structure your CSS stylesheet?</a></li>
  <li><a href="https://stackoverflow.com/questions/72911/whats-the-best-way-to-organize-css-rules">What&#39;s the best way to organize CSS rules?</a></li>
  <li><a href="https://stackoverflow.com/questions/3527800/how-do-browsers-read-and-interpret-css">How do browsers read and interpret CSS?</a></li>
  </ul>