Including CSS with '<Link>' or '@Import' - Which Is Better

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.

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:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

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.

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.

Including CSS with `link` or `@import` - which is better?

The first method (link) is the best.

The main reason is that there is a bug in IE 6,7 and 8 (not sure about 9 or higher) means that when you use @import in conjunction with link the files are loading in series rather than in parallel. This can slow things down a lot when using more than one style sheet.

Just using @import downloads in series, but the order isn't guaranteed, meaning that if there is a reset for instance, that may or may not be applied first.

This article has a good summary: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

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

Next.js Global CSS cannot be imported from files other than your Custom App

Use the built-in Next.js CSS loader (see here)
instead of legacy @zeit/next-sass.

1. Replace @zeit/next-sass package with sass.
2. Remove next.config.js. Or do not change CSS loading in it.
3. Move the global CSS as suggested in the error message.

Since Next.js 9.2 global CSS must be imported in Custom <App> component.

// pages/_app.js

import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

To add styles only to a specific component or page you can use built-in support of CSS modules. (see here)

For example, if you have a component Button.js you can create a Sass file button.module.scss and include it in the component.

Stylesheet not loaded because of MIME type

The issue, I think, was with a CSS library starting with comments.

While in development, I do not minify files and I don't remove comments. This meant that the stylesheet started with some comments, causing it to be seen as something different from CSS.

Removing the library and putting it into a vendor file (which is ALWAYS minified without comments) solved the issue.

Again, I'm not 100% sure this is a fix, but it's still a win for me as it works as expected now.

---

Related Topics