CODEWITHSUNDEEP
cssweb-standards
FriendOfFuture
FriendOfFuture

Reputation: 2608

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

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?

Upvotes: 8

Views: 2081

Answers (5)

Mark Hurd
Mark Hurd

Reputation: 13096

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.

Upvotes: 0

Darko
Darko

Reputation: 38910

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

Upvotes: 0

Andrew Vit
Andrew Vit

Reputation: 19249

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.

Upvotes: 3

Tyson
Tyson

Reputation: 6244

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.

Upvotes: 8

Sophie Alpert
Sophie Alpert

Reputation: 143194

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.

Upvotes: 11

Related Questions