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:

<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.

134 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. www.friv.site (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?

    1. SEO Melbourne Academy (reply)

      Hi Justin
      Hopefully this helps. There is a heavier weighting assigned to inline styles, and in almost all situations, the inline will win over the style sheet. There could be conflicts if you have used the !important rule on the style sheet.

      The way I would approach it would be like this.

      Write your inline code first, and see how it goes. Only use the !important rule if the inline code doesn’t work as expected. It’s best to try and externalize as much CSS as possible, and not use !important, in a perfect world- because a large complex site can create massive stumbling blocks if you ever start changing styles site wide.

      It’s also worth mentioning, the style sheets and pages with inline styles load almost instantaneously together- so any transition from unstyled to styled (as the css files load) will never be seen by almost all users.
      Hopefully this helps.
      Cheers
      Pete

  6. Jacquetta (reply)

    I blog quite often and I really appreciate your content. Your
    article has truly peaked my interest. I’m going to book mark your website and keep checking
    for new information about once per week. I opted in for your
    RSS feed as well.

  7. ブルガリ時計 (reply)

    シャネル ブローチ コピー
    当店の商品を持って、初秋の東京の街角を颯爽と歩いて、人目を惹きます。
    当社は2017逸品が満載している好評度業界No.1シャネル ブローチ コピー激安通販店です。
    大好評だけでなく、正規品と同じ品質のシャネル ブローチ パロディは激安価格で通販中!
    ご光臨を待ちしております。
    ★オークション、楽天オークション、売店、卸売りと小売りの第一選択のブランドコピー店。
    ★信用第一、良い品質、低価格
    ★お勧めの超人気商品はのべたらに更新します。
    ★最高品質ブランド大量入荷!
    ★注文よく売れ中-新作入荷!
    ★価格安い、大好評!

  8. FirstCarmella (reply)

    I see you don’t monetize your site, don’t waste your traffic,
    you can earn extra bucks every month because you’ve got
    high quality content. If you want to know how to make extra money, search for: Mrdalekjd methods for $$$

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>