1

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 ?

zb'
  • 7,714
  • 4
  • 32
  • 64
  • i think http://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css should help you. – Usman Nov 14 '12 at 09:52
  • you can read [this](http://www.stevesouders.com/blog/2009/04/09/dont-use-import/) – Teneff Nov 14 '12 at 09:53
  • You'll get the detailed information of why not to use `@import` and use `` for linking stylesheets to the page here : http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ – Mr. Alien Nov 14 '12 at 09:54
  • ok, from explanation i understand, that i can use @import in my project, but yes, that need some thinking when using it. – zb' Nov 14 '12 at 10:08
  • @eicto stick to normal approach... – Mr. Alien Nov 14 '12 at 10:11

2 Answers2

3

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/

Ramya
  • 1,194
  • 1
  • 7
  • 17
1

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.

William Dresker
  • 131
  • 2