Using the CSS @import Rule

Published March 19, 2008 by CSS Newbies.

box of crayons

Even the most complex style sheet starts out with a single rule. But when you’re working on a particularly massive and complex website, over time your style sheet will inevitably start to reflect the site’s size and complexity. And even if you employ every trick for organizing your CSS in the book, you might find that the sheer size of the file is simply overwhelming. At that point, you might want to consider splitting your style sheet up into several smaller CSS files. That’s when the @import rule can come in quite handy.

The @import rule is another way of loading a CSS file. You can use it in two ways. The simplest is within the header of your document, like so:

	@import url('/css/styles.css');

But that isn’t necessarily the best method for keeping your XHTML small and your code clean. To that end, you can import a style sheet from within another stylesheet. And better still, you can import any number of styles this way. So your document’s head could look like this:

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

Nice and clean. But then your “styles.css” document can contain calls to any number of additional style sheets:

@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');

/* All three CSS files above will be loaded from
   this single document. */

This lets you break up your gargantuan stylesheet into two or more logical portions — I chose typography, layout and color for this example, but you might prefer dividing your CSS according to the site sections they style (content versus sidebar, etc) or something similar. Either way, the benefit is immense — you can have the same number of CSS rules overall, but in smaller, easier to manage units.

You can even load both your screen and print (or handheld, etc) stylesheets all at the same time using this trick. If you’d like to specify a media, just write your rules like this:

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;

Like most cool things in CSS, this one comes with a couple of caveats:

  • The @import rule isn’t recognized by the really old browsers out there… Netscape Navigator 4 skips over @imports entirely, and Internet Explorer 4 ignores them if you don’t use the (entirely optional, but generally used) parentheses. Of course, not too many people these days use either of these archaic browsers. And this problem can actually be useful if you’d like to hide some or all of your CSS from the browsers that can’t really support it.
  • Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else.
  • Internet Explorer (you knew it’d come up eventually) doesn’t deal well with specifying media types – it chokes. Basically, IE (versions 4-7) try to read the media type like it were part of the file name, causing the whole thing to come crashing down. As such, if you don’t want your CSS to have a default media type of “all,” you’re probably better off using a combination of the <link> tag and imports – specifying a media type in your link, and then importing the appropriate CSS within the file you’re linking to. I haven’t yet heard if IE8 suffers from this same problem (if you happen to know, please enlighten me in the comments!).

But even with those caveats in mind, this can be a really useful technique. No matter how big your website ends up getting, you’ll be able to keep your style sheets under control.

129 Responses

  1. friv unblocked (reply)

    Your style is unique compared to other people I’ve read stuff
    from. I appreciate you for posting when you’ve got the opportunity, Guess I’ll just book mark this web site.

  2. (reply)

    certainly like your website however you have to test the
    spelling on quite a few of your posts. Many of them are rife with spelling problems and I find it very bothersome
    to inform the reality then again I’ll certainly come back again.

  3. payday loans (reply)

    Hі tҺere! I ϲould havᥱ sworn I’vе been to this blog
    Ƅefore bսt aftᥱr browsing thrⲟugh ѕome of the post I realized іt’s
    new to mе. Anyways, I’m definiteⅼy glad ӏ found it and Ӏ’ll be bookmarking ɑnd checking
    ƅack frequently!

    Feel free tο suhrf too my site: payday loans

  4. Shad (reply)

    I have no problem importing files after comments. Is there a specific scenario you’re referring to? I see a lot of devs use @import for google fonts and other css style sheets with out problem after comments, etc…..
    Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else.

  5. Justin Lanouette (reply)

    GT metrics is telling me to inline small CSS. The css comes from a gallery. If i inline the css before the gallery tries to import the stylesheets, does it still fetch the import or it notices the css already being inlined?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>