Difference between @import and link in CSS

css import hyperlink
Omar Abid picture Omar Abid · Jun 21, 2009 · Viewed 47.9k times · Source

I'm learning some CSS to tweak my project template. I come to this problem and didn't find a clear answer on the web. Is there a difference between using @import or link in CSS?

Use of @import

<style>@import url(Path To stylesheet.css)</style>

Use of Link

<link rel="stylesheet" href="Path To stylesheet.css">

What's the best way to do it? and why? Thanks!

Answer

mercator picture mercator · Jun 21, 2009

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 questions

import .css file into .less file

Can you import .css files into .less files...? I'm pretty familiar with less and use it for all my development. I regularly use a structure as follows: @import "normalize"; //styles here @import "mixins"; @import "media-queries"; @import "print"; All imports are …

Read More
Google web fonts stored locally versus online source

When I add google web fonts using the @import rule in my CSS file, it works fine. But when I download that font and store it locally in my server and then direct the @font-face rule to my own machine, …

Read More
Next.js Global CSS cannot be imported from files other than your Custom <App>

My React App was working fine, using global CSS also. I ran npm i next-images, added an image, edited the next.config.js, ran npm run dev, and now I'm getting this message Global CSS cannot be imported from files …

Read More