Which method is best for importing multiple stylesheets? I assume, as with most things regarding the web, the answer is 'it depends', but are there downsides of using one or the other?
+6
A:
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.
Pascal MARTIN
2009-09-25 18:55:25
Good answer, but a comment on your subjective preference (since we're talking about performance): Loading multiple files will be slower due to http overhead and the fact that your browser have a limit of ~2 simultaneous request per domain. This limit is probably higher now and it varies for sure from browser to browser, but it will be faster if you turn on caching, gizp, load css at the top of the page and have all css in one file.
MyGGaN
2010-03-09 22:37:04
Thanks for this info, I was about to ask the same question. So what is the point of @import, as I can think of no good uses.
danixd
2010-06-18 13:12:20
A:
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).
voyager
2009-09-25 19:08:39