title: CSS media queries - Order matters?
body: <p>Working a lot now with CSS media queries, I wondered in which order it's best to use them.</p>
  
  <p><strong>Method 1</strong></p>
  
  <pre><code>@media only screen and (min-width: 800px) {
      #content { ... }
      #sidebar { ... }
  }
  @media only screen and (max-width: 799px) {
      #content { ... }
      #sidebar { ... }
  }
  </code></pre>
  
  <p>Like this obviously the code is shorter, but with a lot of CSS you end up having the CSS of one container spread to multiple places in your stylesheet.</p>
  
  <p><br>
  <strong>Method 2</strong></p>
  
  <pre><code>@media only screen and (min-width: 800px) {
      #content { ... }
  }
  @media only screen and (max-width: 799px) {
      #content { ... }        
  }
  @media only screen and (min-width: 800px) {
      #sidebar { ... }
  }
  @media only screen and (max-width: 799px) {
      #sidebar { ... }
  }
  </code></pre>
  
  <p>Like this if you specify the screen size (at which the CSS is active) for each container a new, the overview in my humble opinion is much better.
  But with a lot of CSS you will use the @media query dozens and dozens times.</p>
  
  <p><br>
  Does the second method cause significantly longer load time or has any other disadvantages?</p>
  
  <p><br>
  <br>
  <br></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I might have been not clear enough. My question doesn't really concern the order or the queries as such or about overwriting CSS declarations.
  What I wonder about is rather the norms how other people include the media query "statments" into their css.</p>
  
  <p>Lets say I have only one breaking point where I switch some CSS.
  So I have one media query for min:800px and a second for max:799px.</p>
  
  <p>Should I use both query "statements"</p>
  
  <pre><code>@media only screen and (min-width: 800px) { ... }
  @media only sreen and (max-width: 799px) { ... }
  </code></pre>
  
  <p>only once in my whole stylesheet and include ALL the CSS for ALL containers into the two media query "statments"?
  Or is it okay as well to use the media query "statments" mutiple times?</p>
  
  <p>I mean instead of making two seperate areas in the stylesheet (one for CSS above and one for below 800px), if there are any concerns about the method of using the media query "statments" instead multiple times (for each part of the page again, like for Content, Widgets etc to make them responsive)?<br>
  I would just like to have the CSS for above and below 800px in two different parts of my stylesheet.</p>
  
  <p>I know that ofc both  methodes are working, I am jsut curious about the norms and if using the media query "statements" dozens or hundreds of times within a CSS sheet (instead of just twice in the case I jsut mentioned) will increase the loading times?</p>