@import considered harmful

Apr 18 2008

Jeremy Keith reports from FOWD that, during his presentation on From Design To Deployment, Jon Hicks recommended using @import to load separate stylesheets:

For CSS, Jon begins with a basic file that tidies up fonts and spacing but doesn’t do any layout. Now he @imports a reset stylesheet and a typography stylesheet and a layout stylesheet.

According to Yahoo!’s recently released 20 additional high performance rules, it is actually preferable to use <link> elements rather than @import. The reason given is that when a browser encounters an @import directive, it has the same effect as a <script> tag—it stops doing anything else until that file has been downloaded. (Which is why we now put scripts at the bottom of our pages.)

Of course, that means that if you prefer to create separate stylesheets for your layout, typography, colours, and so on, you either have to link to them all separately (also a performance no-no due to the additional HTTP requests needed), or combine them all into a single unwieldy stylesheet.

The solution is to implement another step into your deployment process, and concatenate all your separate CSS files into one single file when it is released to the live site. You could either do this manually every time (yawn); write a simple script to do this; or there are server-side scripts online that allow you to point to a dynamic PHP script that combines the stylesheets on the fly.

Filed under: CSS.

Technorati tags:

Digg this article

Bookmark this article with del.icio.us

Previously: Web Standards: Semantic or Pragmatic?

Next: Internet semi-famous


Jason Beaird
2438 days ago

I’ve heard reasoning for both @import and , but I’ve never heard that it stops the page load until the files are downloaded. Do you have any links with more detail about this? I didn’t see anything in the Yahoo link except “Choose over @import”.

Jason Beaird
2438 days ago

Doh! TXP ate my script blocks.

Matthew Pennell
2438 days ago

Sorry about that, Jason—I really need to move this site over to EE soon!

Anyway, this link has a bit more information, although it doesn’t quite say that it stops downloads. I can’t recall where I read that—if I find the link I’ll update this post.