importはもう古い？
約3分で読めます
CSSで外部のスタイルシートを読み込む際によく使われる @import 構文ですが、近年のWebフロントエンド開発、特にパフォーマンス最適化の観点から、その扱い方が大きく変わってきています。
今回は、CSSにおける @import の問題点と、現代のスタイル読み込みのベストプラクティスについて備忘録としてまとめます。
1. @import が「もう古い」と言われる理由
CSSファイルの中で @import url("style.css"); のように書く方法は、HTMLを汚さずにファイルを分割できるため便利でした。しかし、ブラウザのレンダリング速度において以下の致命的なデメリットがあります。
- 直列読み込み（ブロッキング）の発生： ブラウザが親のCSSファイルを読み込み、その中身を解析して初めて
@importされた子のCSSファイルの存在に気づくため、読み込みが「直列」になり、画面の表示（レンダリング）が大幅に遅れます。 - HTTP/2環境での足かせ： 現代の高速なネットワーク環境では、ファイルを複数同時に（並列で）読み込むのが得意ですが、
@importはその並列読み込みを阻害してしまいます。
2. 現代の正しいスタイル読み込み方法
現在、スタイルの分割や読み込みを行う場合は、以下の方法をとるのが定石となっています。
- HTML側で link タグを並べる： 複数のCSSに分ける場合は、HTMLの
<head>内で<link rel="stylesheet" href="...">を複数並べて書きます。これにより、ブラウザはすべてのCSSを同時に「並列」で爆速でダウンロードできます。 - SCSS（Sass）の @use を使う： 開発環境にSass（SCSS）を導入している場合は、
@importではなく@use構文を使ってファイルをモジュール化し、最終的なビルド時に1つのCSSファイルにコンパイル（結合）して出力するのが最もパフォーマンスが良いです。
まとめ
CSSの @import は、ブラウザの表示速度を落とす原因になるため、現代のWeb制作においては避けるべき古い手法となっています。ファイルを分けたいときはHTMLでの link タグによる並列読み込みか、SCSSでの @use によるビルド時の結合を選択するのが正解です。