6

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.

Ricardo Zea
  • 10,053
  • 13
  • 76
  • 79

2 Answers2

6

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.

Jared
  • 12,406
  • 1
  • 35
  • 39
  • Jrod, so if in my main CSS file I only have one single `@import` to a reset file, which any of the resets out there don't weight that much, then I don't think it can't be THAT bad, or bad at all. The performance issue starts getting nasty when several CSS files are getting 'imported'. What do you think/recommend? – Ricardo Zea Oct 02 '12 at 15:58
  • You would be better off using two link tags. One for the reset and another for your main because they will be downloaded in parallel instead of one by one. If you want to go the extra step you can use a library such as minify http://code.google.com/p/minify/ to combine all your stylesheets into one. Minifying not only minimizes the amount of requests but also reduces the size of the total css by stripping comments and whitespace. – Jared Oct 02 '12 at 16:03
  • I see. Our servers are Windows servers, I don't think that minify would work, right? (I'm not a network/server guru). – Ricardo Zea Oct 02 '12 at 16:19
  • 1
    It's worth noting that CSS Preprocessors (Sass, LESS, Stylus, etc.) also allow you to have the benefits of modularizing your styles into separate files but compiles them into a single file when using imports. – cimmanon Oct 02 '12 at 16:27
  • @Ricardo The one I linked was for php but I am sure there are similar scripts out there for Windows servers. – Jared Oct 02 '12 at 16:42
  • Is there any advantage of picking the `@import` approach? I mean who would want parallel-download-blocking in this day and age? Your particular implementation may of course require that sort of an architecture. But, when it comes to common stuff such as google font APIs and as such, is there any benefit doing this the `@import` way? Should not we choose approach ALWAYS? – Average Joe Oct 01 '17 at 11:05
1

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.

VoteyDisciple
  • 37,319
  • 5
  • 97
  • 97
  • 1
    Some more recent talk against @import: http://googledevelopers.blogspot.it/2012/03/css-fast-to-load-easy-to-maintain.html – Giona Oct 02 '12 at 15:52
  • 1
    Of course there's talk against it...Google built something they want us to use instead. mod_XX = Apache doing the work instead of the serial round trip of the CSS to browser. With a savings of 0.4secs, which is probably the time it takes Apache to read all the CSS files, and serve them up as one. – Dawson Oct 02 '12 at 17:04