Why @import is not advisable to link css?

Both ways are compliant with standards.

The @import way has one advantage when you add css dynamically using Javascript (such as in Single Page Applications where various components or pages reference their own css files on demand)

That’s because you can reliably use documents.styleSheets[n].cssRules to know when a stylesheet loaded. The “load” event of link elements still has glitches in some browsers. And trying to use cssRules on stylesheets loaded by the link element can cause the browser to complain about not being able to access that infoz

Here's a link to an article that talks 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 not that old (it's from April 2009 -- i.e. less than one year ago), so it should still be mostly true -- and it's 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.

Here's a pretty complete answer on about.com

Segment from article:

The Difference Between @import and <link>

Before deciding which method to use to include your style sheets, you should understand what the two methods were intended to be used for.

<link> - Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the of your HTML document like this:

<link href="styles.css" type="text/css" />

@import - Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an @import in the head of your HTML document, it is written:

<style type="text/css">@import url("styles.css");</style> From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases). But there are a few reasons you might want to use one over the other.

See the article for the rest.