小規模なWEBサイトであれば１つのCSSファイルで十分ですが、大規模になるとどうしても複数のCSSに分けたくなる場合があります。特にメンテナンス性を考えるとCSSにファイルを機能別に分けたほうが楽です。
今回は１つのCSSファイルから複数のCSSファイルを読み込む方法を記載します。無料・有料のJavaScriptやHTMLテーマなどを利用するときに１ファイルから複数のCSSを読み込んでいたりすることが多々ありますので使い方は知っておいたほうが良いでしょう。
目次
警告！CSSファイルの分割は基本的にダメ
まずCSSファイルを複数に分けることはデメリットが大きいのを理解しましょう。昨今のWEBサイトはページ描画速度が重視されています。CSSファイルは１ファイルだけでもWEBページを表示する上でボトルネックになります。それを複数読み込むとそれだけ負荷が増えます。
ただしHTTP/2のサーバーを利用しているならCSSのボリューム次第では複数に分けたほうが早い場合があります。HTTP/2はSSL化（https）していることが条件です。
HTTP/2かどうかは https://tools.keycdn.com/http2-test で確認可能です。
ブラウザというのはリクエストと呼ばれる通信があります。これはHTMLファイルに記述されたCSSファイルや画像などの外部ファイルをブラウザに受け取るやり取りです。ブラウザによってリクエストで１度に読み込めるファイル数が決まっています。Chromeなら１回に６個です。昔は２個とかでした。
リクエストしたファイルの読み込みが完了したら次のファイルをリクエストする流れなので、読み込むファイルが多いほど渋滞します。これがページ表示速度が低下する原因です。
そのためレンダリングに大きく関わるCSSファイルは基本は１個だけにします。もしCSSファイルを分けようと考えている場合はページ表示速度が遅くなるデメリットを理解して利用しましょう。
@importは描画速度が最悪
@importでCSSファイルを読み込んだ場合は体感で分かるくらいページ表示速度が低下します。@import は特殊で、普通はCSSをHTMLの<head>で指定していればファイルを読み込んだ後に一括でレンダリングされます。しかし@importを利用した場合は１ファイル読み込んだらレンダリングを繰り返します。つまり@importの数だけブラウザを更新していることに近い状態になります。
もし速度低下を最低限にして複数のCSSファイルを読み込みたい場合
HTMLファイルで通常通り<link>を複数行書いてスタイルシートを読み込ませます。これもページ表示速度は落ちますが@importほどではありません。ただし、全HTMLファイルへ<link>で読み込む記述をしなければならないので記述ミスがないように注意が必要です。
CSSファイルを１ファイルから複数読み込むメリット
メンテナンス性が非常に高くなります。例えばECサイトなら商品詳細ページと商品一覧ページのCSSを分けて管理できます。あるいは商品のスペック表だけCSSを分けるなんてこともできます。CSSファイルを分けるということは１ファイルに記載されるCSS記述が減るので視認性が良くなります。更新の際も該当するCSSファイルを簡単に探せます。
何よりCSSファイルが分かれているので複数の人で分担しながらサイト制作できます。最終的にWEBサイトが完成したら１ファイルにまとめることもできるのでページ速度低下のデメリットもなくせます。
１ファイルから複数読み込む方法
@import url("CSSのURL");
CSSファイルの先頭で上記の記述を必要な分だけ指定して読み込ませます。この記述をしたCSSファイルをHTMLファイルで普段どおりCSSを読み込ませます。
@import以降には普段どおりCSSを記述することができます。
@importの利用はやめたほうが良いが意外とよく見る
僕自身は@importのデメリットが大きすぎるので使用したことはないのですが、今でもたまに@importを利用しているのを見かけます。コーダーにとってはやっぱり便利なんでしょうね。クライアントのことを考えると最悪ですが。
ただ今はWordPressが主流でCSSの切り替えはWordPress内で色々便利にできますし@importを使わないといけないような場面は減ってきていると思います。とはいえjqueryで組まれたプラグインなんかを見ていると@importをゴリゴリ活用されてたりするのでしばらくは残る文化だと思います。
Sassでは2022年10月辺りに@importが廃止になるそうですね。これからじわじわと使えなくなっていくんでしょうね。
