Whats the point of @import?

Question

Can someone explain what the benefits of using the @import syntax are, over just including css using the standard link method? Thanks.

Answer 1

It allows you to keep your logic CSS file spread over multiple physical files. Helps in team development, for example. Also useful when you have a lot of CSS files that you want to separate by functional areas (one for grids, one for lists, etc), let have accessible in the same logical file.

Answer 2

If you use <link>s in your HTML files, all those files have to keep track of all the CSS files. This obviously makes changes and additions (both for CSS and HTML files) harder.

Using @import, you reduce a theoretically infinite number of changes down to one.

Answer 3

@import allows you have an extensible styesheet without having to change the html. You can link once to your main sheet and then if you want to add or remove additional sheets your html doesn't change.

Also, more smaller files help the browser do better caching. If you make a change in one part of a large sheet, the entire sheet must be downloaded again for every user. If the styles are separated into logical areas among a few sheets, only the file containing the part that changed needs to be downloaded.

Answer 4

One other handy bit, although pretty outdated, is that Netscape 4 couldn't handle @import, so it is a good way of serving a stylesheet to NS4, then having another stylesheet for more modern browsers that was imported in a standards compliant way.

Answer 5

As the answerer said, it lets you split your CSS into multiple files whilst only linking to one in the browser.

That said, it's still wasteful to have multiple CSS files downloading on high-traffic websites. Our build script actually "compiles" our CSS when building in release mode by doing the following:

• All CSS files are minified (extra whitespace and comments removed)
• We have a "core.css" file that's just a list of @import statements; during compilation, each of these is replaced by the minified CSS of that file

Thus we end up with a single, minified CSS file in production, whilst in development mode we have the separate files to make debugging easier.

Answer 6

@import is CSS code. <link> is HTML code. So, if you want to include stylesheets in other stylesheets (or if you can’t change HTML), @import is the way to go.

According to the CSS spec, all @import declarations must appear before any style rules in your stylesheet. In other words, all at the top of your stylesheet

Any @import declarations that appear after style rules should be ignored. Internet Explorer has never respected this; I believe other browsers do. This makes @import a bit less useful, because rules in a stylesheet that’s imported will be overriden by rules of equal specificity in the importing stylesheet.

Answer 7

Say you work for Massive Dynamics, Corp.. It has a Widgets division. The Widgets division has an Accounts department. Accounts is divided into Accounts Payable and Accounts Receivable.

Using @include, you start the website with one top-level global.css stylesheet, which applies to everything.

Then you create a second stylesheet, widgets.css for the Widgets division. It @includes the global one, and its own styles (which can over-ride the global styles if needed, because of the Cascade). Then you create a third accounts.css for Accounts. It @includes widgets.css, which means it also includes global.css. Lather, rinse, repeat.