Difference Between @Import and Link in Css

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.

CSS: @import vs. link href=

The difference comes down to parallel downloading. @import blocks parallel downloading. This means the browser will wait to import the imported file before downloading the next file.

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.

@import vs link

Not much if anything has changed in the past year or two, and we're still dealing with a lot of the same browsers from then, so you should not change your practice.

<link> is preferred in all cases over @import, because the latter blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.

You can see this in great detail here:


So, while @import may be convenient, that's all it offers. If you really want to take advantage of fast loading times, use the minimum number of stylesheets (probably one in most cases), write good CSS with efficient selectors (the usual stuff), minify it, and use a <link> tag.

This was going to be a comment but it got too long:

Instead of @import (I know it is very convenient), you should combine the files into one when your site goes live. You shouldn't be tweaking at that point anyways, and there are a number of tools to help minify it. Personally, using PHP, I have a config file where I define all the CSS files that are written to a separate CSS file (the one I will reference in the <link> tag), then if the cached version is old (either determined manually or automatically), it combines/minifies them and writes the content to the "cache" file, and returns a timestamp query string to append to the CSS file name to force a fresh download.

If you are using PHP as well, I highly recommend cssmin, it can parse stylesheets for @import and pull the content into one file, as well as handle all aspects of minification.

What's the difference between these two methods of linking a html page to a css file?

There isn't much difference unless you are using very old browsers (netscape 4.x and ie 3.x). You can read a complete lowdown on what each means here.

From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases).

@import or link for importing stylesheets?

I once read this article about performances and <link> vs @import : don’t use @import ; quoting a small portion of it :

use LINK instead of @import if you
want stylesheets to download in
parallel resulting in a faster page.

It's quite recent (April 2009), so should still be mostly true -- and written by Steve Souders, whose name is quite well-known when it comes to front-end performances.

On a more subjective point, I quite prefer using several <link> from my main HTML file : this way, I am able to see in only a quick glance what css files are called -- either looking at the template file on the server, or looking at the generated HTML source on the client side.

Difference between @font-face and @import url?

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed.

@import url() Imports another style sheet into the current style sheet. If you have used this to embed a font, actually the imported style sheet includes the @font-face inside it.

Difference between importing CSS from HTML header VS JS file VS Vue Component

To my understanding, importing from HTML headers act as "global" stylesheets. This is especially useful if you need Reset or Normalize CSS file which doesn't need to interact with the rest of the components at all.

Importing from JS file is a webpack feature. I usually use it to import styles to my main (or) individual page components, which then share the stylesheet for their child components.

Lastly, VueJS style tags are commonly used for "scoped" styles. This is especially useful if you need to have unique styles for many child components and doesn't want to conflict with other component styles.

You can use the scoped styling like this.

<style scoped>
/* Your styles over here /*

You can also use CSS Pre-processors in Vue style tags like:

<style lang="scss">

<style lang="less">

Of course the pre-processor styles also can have scoped attribute.

Related Topics

Leave a reply