link czy @import

Question

Co jest lepsze dołączanie pliku za pomocą <link> czy za pomocą @import? 

 

Podobno metoda z link jest szybsza, ale ile w tym prawdy? Przecież to powtarzanie tego samego w każdym pliku HTML!

Może można lepiej? np. jedno <link> z arkuszem stylów do którego dołączamy inne style za pomoca @import.

<link rel="stylesheet" href="style.css" />

@import url(przyklad1.css);
@import url(przyklad2.css);
@import url(przyklad3.css);
@import url(przyklad4.css);
@import url(przyklad5.css);
@import url(przyklad6.css);

 

Czy jest to dobra metoda? Głównie chodzi mi tu o szybkość i inne aspekty.

Answer 1

Nie używaj @import! http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Najgorsza jest wersja zwlaszcza z link + @import w arkuszu, bo całkowicie zabija tzw. parallel download (co widać na wykresach w w/w artykule).

Jeśli chodzi o szybkość - należy załączyć jeden arkusz. A najlepiej to najważniejsze części z niego przenieść do style bezpośrednio na stronie a sam arkusz z resztą stylów doczytać asynchronicznie: http://www.filamentgroup.com/lab/load-css-and-js.html (ogólnie polecam poczytać blog Filament Group, bo goście optymalizacje stron doprowadzają wręcz do absurdu ;))

Comments

Link nie dziala ten do filamentgroup

juz dziala

---

Widać panowie z FG mają ochronę przed hotlinkiem… hmm…

---

Inna sprawa ma się w przypadku korzystania z preprocesorów CSS, tam można spokojnie korzystać z importowania, bo i tak podpinamy tylko końcowy, finalny CSS. Chyba nie muszą jeszcze pisać, że plik powinien być dodatkowo odpowiednio skompresowany... o już napisałem. :P