@importとは何だったのか

HTMLやXHTMLなどで外部CSSの記述をする際に、数年前に主流だった@importという手法は、果たして現在でも効果的なのかを考え直してみた。

そもそも大量のCSSを読み込む際に、複数行に渡って記述をすると読み込みに時間が掛かりそうなので、出来る限りコンパクトにまとめて読み込み速度をアップしたいとか、誰に見られても美しいソースがイイ!オシャレは見えない部分から!!とか、最近業界で流行ってるならそれに従おうとか、そんなのも理由だったりするわけです。まぁデザイナと名乗ってる限りは、これらは全て考えてしまう部分であったりします。

この件についてググッてみたところ、色々なサイトで既に詳しく解説されていたのですが、Screw-Axisさんのサイトの@importを使うべきでないポイントを引用するとこういうことらしい。

ひとつは、パフォーマンスの問題。StyleSheetはほぼ全ての主要ブラウザでパラレルロードがサポートされています。これにより、例えば取得に1秒かかるファイルを3つ使うにも、3ファイルを平行して取得できるのでトータル1秒で済みます。しかし、@importを使うことで、パラレルにダウンロードが出来なくなるケースがあります。その結果、3つのファイルは順に取得され、計3秒かかることになってしまいます。

次に、挙動の問題。こちらはある意味、パフォーマンスよりも深刻です。ある条件下で@importを使うと、CSSの読み込み順序が変わってしまうことがあります。スタイルシートは読み込まれる順番によって適用スタイルの優先度が変わるため、結果として「ある特定のブラウザで、挙動が変わることがある」という非常に再現性の悪い不具合を内包させてしまうことになってしまいます。

結局のところ、@importを使うとHTML内のCSSの記述を同時に並行して読み込めないから結果的に遅くなっちゃうってことぽいですね。まぁ普通に考えればインポートしてるわけなので遅くなるのは少し考えれば分かることでありますが。

しかもまたしてもIE先生がネックになっていて、正常に読み込まれないなどの問題を引き起こす可能性があるようです。先生はどこまでも反逆児の姿勢を貫きますね。WEB屋と先生の戦いはいつ落ち着くのか。休戦ぐらいまで行けるといいんですけどね。

情報量の膨大なサイトでカテゴリごとにCSSファイルがあるから@importじゃないと管理が面倒!とか、それでもHTML内にズラリと記述するのは嫌だ!とか、各々で色々と考え方があると思いますが、情報量が少なかったりCSSファイルが少ないサイトでは、@importを使うより普通に外部記述にしたほうがよさそうですね。

HTML5が今後主流になって行けば、そもそも洗練されて無駄なタグや要素も減っているので、改めて考え直すべきなのかもしれません。ぶっちゃけ、headタグ内に直接CSSの記述をするのが最速だと思いますが・・・。

[css] @importを使うべきでない理由
[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか