title: CSS: @import vs. <link href="">
body: <p>Ok, I've heard a million ways  about how to optimize a website's load speed: The fewer HTTP requests, the better (that's why image sprites were born); Inject only the JavaScript files one page exclusively needs. Use CSS for visual enhancements as much as possible, then maybe consider SVG graphics <strike>(although this one is still debatable)</strike>; compress your CSS and JavaScript files and HTML markup; consolidate your scripts into one single file (fewer HTTP requests back again); gzip your assets; etc, etc.</p>
  
  <p>But today I find this comment on a website:</p>
  
  <p><em>"Since we care about web development best practices, we don’t use @import rules in our projects anymore."</em></p>
  
  <p>To clarify, my question IS NOT about the difference between:</p>
  
  <p><code>&lt;link rel="stylesheet" href="file.css"&gt;</code> vs. <code>&lt;style type="text/css"&gt;@import url("styles.css");&lt;/style&gt;</code></p>
  
  <p>Is about the difference between adding this to your HTML document: <code>&lt;link rel="stylesheet" href="file.css"&gt;</code> vs. adding this <code>@import url("styles.css")</code> INSIDE your main CSS file.</p>
  
  <p>So, what is the difference between loading CSS files from the HTML from loading files from another CSS file?</p>
  
  <p>I mean, HTTP requests will still be there, they're just being made from different locations. </p>
  
  <p>I read Steve Souders' <em><a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/" rel="nofollow">don’t use @import</a></em> article, and About.com's article <em><a href="http://webdesign.about.com/od/beginningcss/f/css_import_link.htm" rel="nofollow">What's the Difference Between @import and link for CSS?</a></em>, but they compare the methods I mentioned above I wasn't referring to, so it wasn't clear to me why not use <code>@import</code>.</p>
  
  <p>BTW, I don't care about Netscape 4 or IE6 (Thank God I can say that now) or IE7 and the FOUC.</p>
  
  <p>Thanks in advance.</p>