@import or link – which to use for your CSS

Most times when I have created a design, I use the standard format for calling my CSS file, namely

[php]<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />[/php]

This is placed in my header file before the head tag and it works every single time.

However, like me, you have probably seen the @import call to a CSS file, usually found within another CSS file itself?

So why is this in place and what does it do differently than the standard method outlined above?

Well, after a lot of reading/researching and scratching of the cranium, it seems that the @import file is mainly used to call another CSS file in addition to the one you are working on. Of course, you can have two CSS ‘link’ calls [or more] in your header, and they will work just the same, but there is a slight difference in load times and perhaps more importantly, a difference in ‘how’ they load.

According to individual tests, such as this one over at stevesouders.com, if you opt to use the @import method, you are at risk of slowing down your web page load times.

As the above-mentioned article explains, the two main disadvantages of using @import are:

Using @import within a stylesheet adds one more roundtrip to the overall download time of the page.
Using @import in IE causes the download order to be altered. This may cause stylesheets to take longer to download, which hinders progress rendering making the page feel slower.