Best Way to Include Css? Why Use @Import

Best way to include CSS? Why use @import?

From a page speed standpoint, @import from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. For instance, if stylesheet A contains the text:

@import url("stylesheetB.css");

then the download of the second stylesheet may not start until the first stylesheet has been downloaded. If, on the other hand, both stylesheets are referenced in <link> elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.

There are occasionally situations where @import is appropriate, but they are generally the exception, not the rule.

What are the advantages and disadvantages of using @import in CSS

Under normal circumstances, loading your CSS files using the @import method could significantly increase page load times as the individual files are then referenced one after the other. File B won't load till File A has downloaded. CSS referenced using the <link> tag on the other hand, can be downloaded simultaneously.

While this does seem like an outright disadvantage, using the @import method does lend a pretty outstanding advantage; Organisation.

As your project grows in size and complexity, maintaining your CSS files, however organised and picky you are, can become a chore, to say the least. The @import method helps you break your massive stylesheet into more comprehensible and logical portions.

To illustrate, you would typically reference your CSS file through a single <link> tag like so:

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

This stylesheet could then reference several other subsidiary stylesheets,

@import url('/styles/navbar.css')
@import url('/styles/header.css')
@import url('/styles/typography.css')
@import url('/styles/grid.css')

This is just a rudimentary example off the top of my head, but hopefully you can see the potential of much more organised system. This can also make it easier for other team members to better understand where the referenced styles have been declared.

Blockquote Note Just make sure these imports are at the very top of the stylesheet. There shouldn't be any declarations/content before this. This also includes <-- comments -->

Is using @import declarations a bad practice?

I think you should use LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. It turns out that avoiding @import is better for performance.

link

• Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet.

import

• Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet.

The most common reason given for using @import instead is because older browsers didn't recognize @import, so you could hide styles from them.

This link will solve your all queries

What's the Difference Between @import and link for CSS?

Is it possible to include one CSS file in another?

Yes:

@import url("base.css");

Note:

• The @import rule must precede all other rules (except @charset).
• Additional @import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css.

CSS @import Best Practices

From pure experience:

While working you can keep everything separated (reset.css, forms.css, main.css, etc.) if you find it hard to work with one single file - I don't do even that..

When putting on production - keep everything in one file - no imports - 1 server request - minimize your css.

Exception is an additional ie.css if you want to keep your main.css hack free/pass validation (I also don't do this since not a single of my clients cared about validation - people want it to work, badges are not a trend :) - so i just use hacks trough my main.css (#, _, etc.))

Import css file from same non-root directory

As it is an @import, make sure it is placed at the very top of your main CSS document.

@import url("./nav.css");

@import url("./width.css");

Although you can do it, I would personally advise against it. Although it might seem to be more "sorted" it creates extra HTTP requests, which depending on the size of the project, may hurt your performance.

Difference between @import and link in CSS

In theory, the only difference between them is that @import is the CSS mechanism to include a style sheet and <link> the HTML mechanism. However, browsers handle them differently, giving <link> a clear advantage in terms of performance.

Steve Souders wrote an extensive blog post comparing the impact of both <link> and @import (and all sorts of combinations of them) called "don’t use @import". That title pretty much speaks for itself.

Yahoo! also mentions it as one of their performance best practices (co-authored by Steve Souders): Choose <link> over @import

Also, using the <link> tag allows you to define "preferred" and alternate stylesheets. You can't do that with @import.

---

Related Topics