title: Single vs multiple stylesheets in responsive web design
body: <p><strong>In short:</strong></p>
  
  <p>Should you use one or multiple stylesheets when doing responsive web design?</p>
  
  <p><strong>In detail:</strong></p>
  
  <p>In <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive design</a>, you tend to have one main chunk of CSS, then other bits and pieces to adjust the layout when it reaches certain breakpoints. You can structure your code one of two ways:</p>
  
  <p><em>Single stylesheet</em></p>
  
  <pre><code>/* Main CSS */
  
  @media only screen and (min-width: 480px) { /* CSS */ }
  @media only screen and (min-width: 640px) { /* CSS */ }
  @media only screen and (min-width: 800px) { /* CSS */ }
  </code></pre>
  
  <p><em>Multiple stylesheets</em></p>
  
  <pre><code>&lt;link rel="stylesheet" media="screen" href="main.css"&gt;
  &lt;link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css"&gt;
  &lt;link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css"&gt;
  &lt;link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css"&gt;
  </code></pre>
  
  <p>It seems that using one stylesheet will reduce the number of HTTP requests, but you'll have a larger file which will contain code that might not be used by some clients. Multiple stylesheets seems to keep file sizes down, but then you have more HTTP requests.</p>
  
  <p>When should you opt for each approach? How do the pros and cons of number of HTTP requests and file size stack up in practice?</p>