@import or <link> for importing stylesheets?

2019-01-25 07:09发布

问题:

Which method is best for importing multiple stylesheets? Is one method more efficient than the other?

回答1:

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.



回答2:

On some (all?) implementations @import is processed at the end of the loading of the page, so you'd have the undesired Flash of Unstyled Content using it.

link works usually better, but if what you wan't is to define a different media, you could use it without problem. Also, its a neat trick to hide CSS from older browsers (<IE5.5).