css link format, styles

Question

Why most developers use the

<link href="/js/jquery-ui/css/flick/jquery-ui-1.8.23.custom.css" type="text/css" />
<link href="/css/main.css" type="text/css" />
<link href="/css/table.css" type="text/css" />

instead of

<style type="text/css">
 @import "/js/jquery-ui/css/flick/jquery-ui-1.8.23.custom.css";
 @import "/css/main.css";
 @import "/css/tables.css";
</style>

even in autogenrated code in html markup ? What is disadvantages of last method ?

• Usman: i think stackoverflow.com/questions/1022695/… should help you.
• Teneff: you can read this
• Mr. Alien: You'll get the detailed information of why not to use @import and use <link /> for linking stylesheets to the page here : stevesouders.com/blog/2009/04/09/dont-use-import
• zb': ok, from explanation i understand, that i can use @import in my project, but yes, that need some thinking when using it.
• Mr. Alien: @eicto stick to normal approach...

Answer 1

Below are the few disadvantages that I know

• Old browsers doesn't support @import
• We can not take advantage of rel and title attributes with @import where we can take advantage of those attributes
• link method is known as its simplicity

In order to learn more disadvantages with @import please go through http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Answer 2

The biggest disadvantage is that CSS @import loads every CSS file seperately instead of loading files at once. This means the browser has to wait for every single imported CSS file to finish loading until it can start loading the next one. This slows down your website significantly, especially if you have a lot of imported CSS files.