What is the difference between @import from css and Link from html?

Question:

I created a file containing css patterns that are used on my system. I would like to know what is the difference between calling css via the link or via @import like this:

/* ou dentro do codEventos.css */

@import "../padrao.css";
<link href="padrao.css">
<link href="codEventos.css">

What are the advantages/disadvantages?

I read in a link: dont-use-import that there is a big difference in performance, since the link can load the css in parallel making it have more performance over @import , of course not all browsers interpret this way.

Answer:

In theory, the only difference between them is that @import is the CSS mechanism for adding a style sheet and <link> is the HTML mechanism for doing the same. However, each browser handles them in different ways, giving the <link> a clear performance advantage.

Steve Sourders wrote an extensive article on his blog, comparing the impact of both <link> and @import (and all possible combinations between them) called "don't use @import" ("Don't use @import"). The title says it all.

Yahoo! he also mentions it as one of his best performance picks (co-authored with Steve Sourders): Choose <link> over @import . ("Choose <link> instead of @import").

Also, using the <link> tag allows you to define "preferred" and alternate style pages. You cannot do this with @import.

This is a full English translation of the answer to that same question, which you can find at https://stackoverflow.com/a/1022715/1639385

Scroll to Top