13

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

Chris Schmitz
  • 8,097
  • 6
  • 31
  • 41
  • Are you asking if you should use `media="screen"` in your `` or use `@media screen` inside your style sheet? Or are you debating useing `@import` vs ``? – idrumgood Sep 25 '09 at 20:27
  • possible duplicate of [Difference between @import and link in CSS](http://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css) – totymedli Aug 18 '13 at 22:00

2 Answers2

14

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
  • 395,085
  • 80
  • 655
  • 663
  • 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 Mar 09 '10 at 22:37
  • 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. – theorise Jun 18 '10 at 13:12
1

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

Esteban Küber
  • 36,388
  • 15
  • 79
  • 97