css @import vs less @import

cssファイルで外部スタイルシートを読みこむ方法には以下の方法がある。
@importを使う方法ですね。

たとえば、hoge.cssというファイルに

@import "reset.css";
@import "fonts.css";
@import "default.css";
@import "specific.css";

という風に記載すると、このファイルの読み込みが完了したあとに@importで指定したファイルの読み込みが開始する。

ここが重要である。つまり、hoge.cssの読み込みが完了しないと、@importで指定したファイルの読み込みが開始されないのだ。
また、cssの@importは別々にリクエストを送るので、上の例だと合計5つのHTTPリクエストが発生する。
このあたりが@importが忌避される原因だろう。

@import "reset.less";
@import "fonts.less";
@import "default.less";
@import "specific.less";

と書いても、コンパイラとかがよしなにやってくれて、複数のファイルを1つに統合してくれる。
つまり5つのファイルが(事実上)同時に読み込まれるのだ。

<link rel="stylesheet" href="hoge.css">
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="reset.css">

と書けば同時に読み込んでくれるわけですけども。

by shigemk2