Css: @Import VS. <Link Href="">

CSS: @import vs. link href=

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.

Difference between @import and link in CSS

In theory, the only difference between them is that @import is the CSS mechanism to include a style sheet and <link> the HTML mechanism. However, browsers handle them differently, giving <link> a clear advantage in terms of performance.

Steve Souders wrote an extensive blog post comparing the impact of both <link> and @import (and all sorts of combinations of them) called "don’t use @import". That title pretty much speaks for itself.

Yahoo! also mentions it as one of their performance best practices (co-authored by Steve Souders): Choose <link> over @import

Also, using the <link> tag allows you to define "preferred" and alternate stylesheets. You can't do that with @import.

@import vs link

Not much if anything has changed in the past year or two, and we're still dealing with a lot of the same browsers from then, so you should not change your practice.

<link> is preferred in all cases over @import, because the latter blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.

You can see this in great detail here:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

So, while @import may be convenient, that's all it offers. If you really want to take advantage of fast loading times, use the minimum number of stylesheets (probably one in most cases), write good CSS with efficient selectors (the usual stuff), minify it, and use a <link> tag.

---

This was going to be a comment but it got too long:

Instead of @import (I know it is very convenient), you should combine the files into one when your site goes live. You shouldn't be tweaking at that point anyways, and there are a number of tools to help minify it. Personally, using PHP, I have a config file where I define all the CSS files that are written to a separate CSS file (the one I will reference in the <link> tag), then if the cached version is old (either determined manually or automatically), it combines/minifies them and writes the content to the "cache" file, and returns a timestamp query string to append to the CSS file name to force a fresh download.

If you are using PHP as well, I highly recommend cssmin, it can parse stylesheets for @import and pull the content into one file, as well as handle all aspects of minification.

Best way to include CSS? Why use @import?

From a page speed standpoint, @import from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. For instance, if stylesheet A contains the text:

@import url("stylesheetB.css");

then the download of the second stylesheet may not start until the first stylesheet has been downloaded. If, on the other hand, both stylesheets are referenced in <link> elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.

There are occasionally situations where @import is appropriate, but they are generally the exception, not the rule.

CSS: What is better practice? Import all at once or Link one by one per html?

To optimise the speed, you should try to:

• have as few CSS files as possible
• load only the CSS needed for each page
• reuse CSS files in different pages

These goals will partly conflict. Normally you will have some CSS that is not used in a specific page, but that is all right because that allows you to have fewer files and reuse the files.

"does the browsers cache the css files all the time?"

Yes, they normally do. Making browsers download new versions of CSS files is an actual problem.

CSS import or link rel... with media attribute

It has been discussed many times, you can read more here:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Difference between @import and link in CSS

http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

to mention some...

Personally I never use @import as for the performance impact.

---

Related Topics