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:
<style>
@import url('/css/styles.css');
</style>
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.