@import and why I don't use it

1. Inline style attribute on an element
2. <style> block
3. <link> tag
4. <style> with @import

We all know why you shouldn't use inline, and unless there's a really good reason, you probably shouldn't use the <style> block either. But to be honest, I knew nothing about using @import until recently. So what exactly does the following code to?

@import url('a.css');

Luckily Steve Souders comes to the rescue, again. Last week he wrote a great post on why you shouldn't use @import for performance reasons. Now, in terms of organizing code, @import seems pretty nice. I can structure my css in such a modular way and not have a million <link> tags at the top of the page. But in terms of performance, using @import is a no-no.

Steve goes on to explain different scenarios, mixing <link> with @import, multiple @imports, @import with javascript, and clearly displays what the issue is: (mainly IE) Browsers will consider @import a blocking request, and won't download other resources in parallel.

This makes sense, because you can have @import declarations inside stylesheets, not just in the html. The only place I've actually seen @imports in a stylesheet is jQuery's base UI styles. Let's say you have a site that uses all of the jQuery UI library (yes, that's a LOT of UI, but bear with me). It's easiest to just add:

<link rel="stylesheet" type="text/css" href="/css/ui.all.css" />

But when you crack open ui.all.css

@import "ui.base.css";
@import "ui.theme.css";

And then look inside ui.base.css

@import url("ui.core.css");
@import url("ui.resizable.css");
@import url("ui.accordion.css");
@import url("ui.dialog.css");
@import url("ui.slider.css");
@import url("ui.tabs.css");
@import url("ui.datepicker.css");
@import url("ui.progressbar.css");@import url("ui.core.css");
.
.
.

Ok, CLEARLY there's something wrong with the build process. Download it for yourself to check though. Time to submit a bug report. I'm pretty sure it should just be:

@import url("ui.core.css");
@import url("ui.resizable.css");
@import url("ui.accordion.css");
@import url("ui.dialog.css");
@import url("ui.slider.css");
@import url("ui.tabs.css");
@import url("ui.datepicker.css");
@import url("ui.progressbar.css");

Yeah... I feel like this would give Steve a heart attack. In the real world, you would pick out which ones you actually needed, put them into a single stylesheet along with your other styles and compress as much as possible. But, programmers tend to be lazy, and it's much easier, quicker, and...lazy to just add ui.all.css.

So, the lesson: don't use @import. Make your front-end perform as fast as possible to keep your users around and having a good time. What does that extra 100 or 200ms do to your site's profit?

Even small changes in response times can have significant effects. Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006). When the home page of Google Maps was reduced from 100KB to 70-80KB, traffic went up 10% in the first week, and an additional 25% in the following three weeks (Farber 2006). Tests at Amazon revealed similar results: every 100 ms increase in load time of Amazon.com decreased sales by 1% (Kohavi and Longbotham 2007).

WebsiteOptimization.com The Psychology of Web Performance