CSS: @import vs. <link href=""> [duplicate]

Question

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 (although this one is still debatable); 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.

But today I find this comment on a website:

"Since we care about web development best practices, we don’t use @import rules in our projects anymore."

To clarify, my question IS NOT about the difference between:

<link rel="stylesheet" href="file.css"> vs. <style type="text/css">@import url("styles.css");</style>

Is about the difference between adding this to your HTML document: <link rel="stylesheet" href="file.css"> vs. adding this @import url("styles.css") INSIDE your main CSS file.

So, what is the difference between loading CSS files from the HTML from loading files from another CSS file?

I mean, HTTP requests will still be there, they're just being made from different locations.

I read Steve Souders' don’t use @import article, and About.com's article What's the Difference Between @import and link for CSS?, but they compare the methods I mentioned above I wasn't referring to, so it wasn't clear to me why not use @import.

BTW, I don't care about Netscape 4 or IE6 (Thank God I can say that now) or IE7 and the FOUC.

Thanks in advance.

Answer 1

The difference comes down to parallel downloading. @import blocks parallel downloading. This means the browser will wait to import the imported file before downloading the next file.

Answer 2

The first article you cited (Steve Souders' "don't use @import") specifically addresses the case of an @import inside a stylesheet imported through <link> — it's just as bad for performance as putting the @import inside a <style> tag. In fact, it's a little worse: the browser first has to fetch the linked stylesheet, then parse that stylesheet, then discover the @import rule, then fetch the imported stylesheet.