Are there reasons to still use the "@import" css rule?

Question

I recently came across a use of the @import rule on Coda.com. They're actually using to import the main style sheet for the site, specifically the format:

<style type="text/css" media="screen">
  @import url(./coda.css);
</style>

Which will hide the rules from Netscape 3 and IE 3 and 4. Since a web development tools primary audience will be using modern browsers, what other reasons would there be to use this rather then a link?

Answer 1

None. Using a <link> element also has the advantage of getting rid of the FOUC.

EDIT: Using @import in another stylesheet (.css file) can be used like an #include in C, but there isn't any reason to use @import in a <style> block.

Answer 2

For Coda's site, I'd imagine they did that more out of force of habit rather than any pressing technical need.

@import statements inside of actual CSS files (not in a <style> element in HTML) serve many purposes, such as making it easy to swap in and out other CSS files. The Blueprint CSS framework does this to let you easily remove certain portions of the framework such as the typography stuff or the grid stuff.

Of course, in a production environment, using a bunch of @import statements is frowned down upon because it increases the number of files a web browser has to pull down.

Answer 3

The only reason to use this rule today is to make your CSS more modular by splitting it into different files, like libraries.

So, while your page might link to one stylesheet, that stylesheet can @import other stylesheets for reset, typography, etc.

However, this does slow the loading of your page since it's just more sequential http requests.

Answer 4

I agree with Andrew. I also use imports to split out my css logically. Personally I like to split them out in 4: reset, structure, typography, general (bgs/borders etc)

Depending on the person doing it, their style and preference, css files can also be split out by page section eg header.css, footer.css etc.

One extra thing I do however to avoid the multiple http requests is have a build process which merges (in order of import) and compresses the css files for live deployment.

Hope this helps

Answer 5

I use a modular development approach myself, and often end up with 10+ individual CSS files. As you know, that's a pretty drastic number of HTTP requests, so I like to use Blender.

Blender is a rubygem that consolidates and minifies any number of CSS files into a single stylesheet. It also works for JavaScript.

You can define @media in your individual stylesheets to only serve the appropriate rules to the correct device types.