CSSファイルを分割する理由とキャッシュ対策

HTMLを修正する、CSSを修正する、HTML・CSS両方とも修正する

Webサイトはコーディング方法によって修正時のスピード感が変わります。修正がある場合、主にテキスト修正と見た目の修正と2パターンとなるでしょう。この場合、弊社では次のような修正で済むのが理想と考えます。

• テキスト修正（例：文字校正）→該当箇所のHTMLを修正
• 見た目の修正（例：文字サイズ変更）→該当箇所に効いているCSSを修正

対して見た目の修正でHTMLの修正が必要なコーディングの場合、次のような問題が生じます。

• 修正対象が複数ある場合、修正箇所もその分増えてしまう
• 修正後に設定したい内容がCSSに存在していない場合、HTMLとCSSの両方修正が必要となる

運用フェーズでは対応箇所が少ない方がスピード感もありますし、ミスの可能性も減ります。コーディングは修正時の対応も踏まえて設計すべきです。

PC版とモバイル版をディレクトリで分類する

CSSファイルは1つにまとめることも複数ファイルに分割することもできます。どちらが良いかというのは作り手に任せるのではなく、運用面からCSSファイルの管理方法を構築すべきです。弊社では2つの理由からCSSファイルを分割した方が良いと考えています。

CSSファイルが1つの場合と分割している場合では修正時に大きく変わります。CSSファイルを1つで管理している場合、行数が1万行を超えることもあります。1万行を超えるCSSファイルの内容を把握するとなると結構大変です。CSSを分割していると把握するための最初のハードルは下がります。ただし、最初のハードルが下がるだけで、後工程での把握しやすさは作り方次第となります。

CSSを複数に分割した場合、PC版とモバイル版でそれぞれディレクトリを別にした方が分かりやすくなります。CSSを修正する場合、まずWebインスペクタで対象箇所を把握すると思います。Webインスペクタは該当ファイルと該当箇所を明示してくれますが、それでもCSSの構成は分かりやすくした方が後工程の楽さは段違いです。

目的別にファイルを分ける

CSSは目的別に分類しておくこと分かりやすいです。例えば次のような形です。

• 共通ファイル用（ヘッダー、フッター）
• トップページ用
• 一覧ページ用
• 詳細ページ用

このように分類し、該当箇所以外にCSSが効かないように作ると修正時の対応スピードも速くできます。なお、CSSは他のCSSを読み込むためだけのインポート専用ファイルを使用して入れ子にします。ここでさらにCSSのキャッシュ対策もします。

キャッシュ対策への取り組み

キャッシュとは閲覧したWebページの情報を一時的に保存する仕組みです。同じページを閲覧するたびに読み込むことは無駄な通信が発生します。キャッシュがあることで無駄な通信も防げるし表示速度も速くできます。ただし更新したのに反映されないという問題も抱えることになります。

WebブラウザはCSSのキャッシュが強力です。単にリロードしただけではCSSの更新を反映されません。Webブラウザはスーパーリロードというキャッシュをクリアする仕組みを用意しています。ただし、それを知らない人も多いので、キャッシュ対策も踏まえたHTMLコーディングをしておくと不要なトラブルを回避できます。

インポート用CSSのファイル名にパラメータとしてタイムスタンプを追加する

前述の通りCSSは入れ子にします。インポート用のCSSにはファイル名にパラメータを付与します。例えばパラメータをPHPでタイムスタンプとすると読み込むたびに最新の状態となります。つまりインポート用CSSはキャッシュされない状況にします。

子ファイルのファイル名には手作業でパラメータを追加する

そして子ファイルのファイル名にもパラメータを付与します。このパラメータは手作業で管理します。手作業で管理する理由はキャッシュをさせるためです。全てのCSSファイルをキャッシュさせないと常にCSS全体を読み込むことになります。CSSファイル自体は小さくてもチリも積もれば結構な通信量となります。キャッシュさせるCSS、キャッシュさせないCSSを使い分け、キャッシュさせるCSSは更新時のみパラメータを変更して読み込ませることでキャッシュ対策を行います。