Ive been hearing about using @import for linking stylesheets to webpages lately… Can someone explain this to me, and why/when it should be used over the normal <link href=…> way? Is it meant to replace <link href> or work alongside it? I’ve seen it used both ways in code lately and it’s got me a bit confused as to its place within “best practices”…
Thank you!
All of IE is buggy with import and to avoid those bugs altogether it’s just simpler to use the non buggy <link> :).
I believe IE5.5 is when @import support began (AFAIK, I might be delusional)
No, it was used to hide styles from Netscape 4 (IE4 was the main browser that @import worked in at that time).
The only time you’d have an issue using multiple <link> tags to supply all the styles is if you are also supplying alternate styles also using link tags. To properly control what gets swapped out and what gets swapped in when using alternate stylesheets you’d need to make sure you only use one active stylesheet per media with the rest being marked as alternates. That’s where you’d need to use @import if you wanted to share styles between the alternatives.
Any issues related to import vs <link> are long gone (besides an IE8 bug where imported stylesheets inside of imported stylesheets are limited to a certain number, but that’s unlikely you will run into that)
So really it’s all up to you (it’s easier to specify media type in the <link> way though (also easier to remmeber)
It’s up to you, but ultimately most people go with <link> 
I separate stylesheets and use <link>.
One for a reset.css, another for styling forms, another for layout & page-specific code, and others for separate IE-only code.
Being separate, I can reuse the reusable parts elsewhere quite easily.
I also enable GZIP compression in .htaccess:
For apache 1: http://www.samaxes.com/2008/04/htaccess-gzip-and-cache-your-site-for-faster-loading-and-bandwidth-saving/
For apache 2: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
(granted, it doesn’t cut down on the file requests, but it still helps in other areas)
@import in IE8 and lower has a limitation of 3 levels of nesting. Anything beyond that is ignored. http://reference.sitepoint.com/css/at-import
Since I hadn’t considered the merits of changing to @import untill I saw this thread, I’ve got a question about @import–if you use one sheet with a <link> or @import in your HTML, and nest all the others in that sheet with @import, would that count as one request, or would the browser still request each nested sheet anyway?
I don’t understand why people use separate stylesheets in most cases. You can organize stuff into one stylesheet so it’ll remain readable and easy to follow without adding unnecessary requests to the server. With exception for conditional comments (which require the link anyway as you can’t use them within CSS documents) I just use media queries within the master stylesheet, less additional requests to the server and that could give it a minor speed edge.
From what I understand, @import has some issues, including slightly slower display speeds, and the FOUC, or “flash of unstyled content.” with older IE browsers (I think this goes back to IE5). Most designers use them to conceal subsidiary stylesheets from older IE browsers, which don’t recognize the @import command. (Someone correct me on this last one if I’m wrong.) Basically, there’s no compelling reason of which I’m aware to use it unless you need to head-fake an old version of IE .