1. Technology

Why Use @import for External Style Sheets

Not Just for Browser Hacks

By

The CSS @import rules used to be used mostly by people who wanted to hide some rules from Netscape 4. But since that browser has hardly any market share any longer, it seems pointless to use @import when you can use the <link> tag and media types to get the same effect. But is that really true?

@import Helps You Manage Multiple CSS Files

Once you've been building a website for a while, most people discover that having multiple CSS files is useful. For one thing, more than one person can edit the CSS at one time. Multiple CSS files make it easy to organize your CSS. Plus, multiple CSS files allow you to separate both browser hacks and style functions. For example, you can have all your general style properties in one file, your typography properties in another, your colors in a third, and your layout grids in a fourth.

But when you have to associate your style sheets to a page, if you use the <link> tag, you have to add a link to all those style sheets. This isn't hard. But what if a month from now, you add another style sheet document to your site? If you're using the <link> tag, you have to edit every file on your website to add that tag into the <head>.

With @import, you simply add one <link> to your documents when you build them. Then, that CSS document acts as a master file that imports all the other CSS files. You can add, rename, or change the CSS files for your site from one master document. Without needing to edit any pages on your website. Your HTML would look like this:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="standard_css.css" rel="stylesheet" type="text/css" />
...

The standard_css.css file would then look like this:


@import url("basics.css");
@import url("typography.css");
@import url("colors.css");
@import url("layout.css");

When you need to add a new style sheet, you would simply add the @import line to your standard_css style sheet.

See More About
  1. About.com
  2. Technology
  3. Web Design / HTML
  4. CSS
  5. Advanced CSS
  6. Why Use @import for External Style Sheets - Not Just for Browser Hacks

©2014 About.com. All rights reserved.