Web Survive

Webで生きる道を模索するブログ

CSSファイルの分割と設定

CSSファイルの分割

HTML+CSSの考え方・書き方の基本を学び、
実際にサイトを丸ごとコーディングするとなったとき、
いくつか面倒なことが出てきます。
たとえば
「CSSファイルの行数が肥大し、修正したい箇所がどこにあるかわからない」、
「ブラウザごとにCSSの解釈に違いがある」、
「書いたはずのスタイルが効かない」などです。

そのような問題を解決し、
HTML+CSSのファイル設計をあらかじめきちんと考えておくのが大切です。
設計といってもむずかしいことではありません。
CSSのソースコードをいくつかの部品に分解し、複数のファイルで管理するだけです。

css-split-image

CSSファイルの分割のメリットは「効率化」

CSSファイルの分割のメリットをひとことでいえば
「作業が効率的になること」です
コーディング時や修正時はもちろん、運用中や何か問題が起こったとき、
リニューアルのときなども素早く問題解決できます。
CSSファイルの分割のメリットを詳しく見ていきましょう。

CSSファイルの分割

CSSを複数のファイルに分けて管理することを
「CSSのコンポーネント化」と呼ぶこともあります。

初期セッティングがしやすい

HTML+CSSによるコーディングを何度も経験すると、
いつも同じようなソースコードを書いていることに気づきます。
そういった「毎回使うスタイル」をファイルにまとめておけば、
次回からそのまま使いまわすことができます。

毎回使うスタイルの例としては、
各ブラウザ間の差異をなくす「リセットスタイル」や、
定番のレイアウトのスタイルなどがあげられます。

修正時の検索性が上がる

CSSを1枚で管理すると見通しが悪く、
どこにスタイルを書いたのかすぐにはわからないことが多いものです。
スタイルを追加する際も、
正しい場所を探さないまま適当な場所に記述してしまい、
さらにメンテナンス性が悪くなる、といった悪循環が生まれてしまいがちです。
複数のファイルで管理していれば、ファイル名から
「何が記述されているか」を想像できる
ので、
そのような無駄を大幅に減らすことができます。

問題点を絞り込みやすい

CSSを複数のファイルに分割しておけば、
@importでの読み込みをいったん解除することで問題点を絞り込むことができます。
たとえばコーディング途中にいつの間にか段が落ちる(カラム落ちする)ようになってしまった場合、
読み込んでいるCSSファイルをひとつづつ解除していけば、
どのCSSファイルに書かれた記述が問題なのか原因を特定しやすいのです。

カテゴリーごとやページごとで違ったデザインにしやすい

CSSはあとから読み込んだもので「上書き」することができます。
その特徴を活かして、まず共通のスタイルを読み込んだあとで、
カテゴリーやごとやページごとに用意した別のスタイルで上書きを行えば、
簡単にカテゴリーごとやページごとで異なるデザインにすることが可能になります。

CSSの差し替えや削除が簡単

Webデザインには、2カラムか3カラムか、サイドバーは右か左か、
幅は固定か可変かなど、ある程度決まったレイアウトパターンがあります。
あらかじめパターンごとのCSSファイルを作っておけば、
必要に応じて差し替えるだけでレイアウト変更が可能
です。
また、キャンペーンページなど、
一定期間が終われば丸ごとなくなるようなコンテンツの場合、
そのページ固有のスタイルを別のCSSファイルにまとめておくことで、
コンテンツ削除時にCSSファイルごと削除すれば済みます。

あらかじめレイアウトパターン別にCSSファイルを作っておき、必要であれば差し替える

css-split-image-2

CSSハックが管理しやすい

ブラウザごとの表示の違いを調整する「CSSハック」も、
独立したCSSファイルに記述しておくことで作業が効率化できます。

古いブラウザへの対応が必要なくなったときにハックを丸ごと削除できますし、
最新のブラウザ対応などでハックの記述方法を変更したいときも
一カ所にまとめていれば修正モレがなくなります。

複数のスタッフで作業しやすい

CSSが分割されていれば、複数のスタッフでコーディング作業がしやすくなります。
すべてのページに適用するスタイルは共通のCSSファイルとして先につくっておき、
あとはカテゴリーごと、ページごと、機能ごとなどで
それぞれコーディングを行うことができるからです。

CSSファイルの分割のデメリットと対策

CSSファイルの分割は
「細かくファイルを分ければOK」ではなく、
適切に設計しないと逆効果になることがあります。
次のようなデメリットと対策を知っておきましょう。

混乱を招くことがある

CSSファイルの分割は、単純にファイルを分けるだけではうまくいきません。
たとえば「main.css」と「style.css」というファイルがあったら、
ほかの人にとってはどちらに何が書かれているのか、
スタイルをどのように区別し、修正や追記をすればよいのかまったくわかりませんし、
あとあと自分でも混乱してしまうでしょう。
記述場所の間違いや重複などが起こらないように、
直感的にわかるファイル名にしましょう。

そのためにも、
「どのような問題が起こりやすくて、
どのようにファイルを分割すれば解決できるか」

きちんと考えておく必要があります。

ファイル管理やバージョン管理が煩雑になる

CSSファイルの分割によって、
複数のスタッフが自分の役割にあわせて作業を同時進行できるようになるので、
全体として作業は早く進みますが、
ファイルの”先祖返り”や上書きミス、重複指定なども発生しがちです。
これらを回避するには、
システマチックな権利管理やバージョン管理を導入する方法もありますが、
更新履歴を書いておくだけでも効果があります。
「誰が、どのファイルのどの部分を、いつ更新したのか」をはっきりさせるために、
CSSファイルの上部(@charsetのあと)に、ファイル名や概要、更新日、更新者、
ファイル内の目次などの「インフォメーション」をしっかり書いておくのです。

先祖返り

新しいバージョンが古いバージョンに入れ替わってしまうことを、
「先祖返り」と呼びます。できる限り避けたい事態です。

ページの表示速度に影響することがある

大手サイトやWebサービスのような、
ある程度以上のアクセスが見込まれるWebサイトの場合
安定運用のためにサーバーや回線への負荷をできるだけ軽くすることが重要ですが、
HTTPリクエストの数を減らすこともその対策の一つです。
HTTPリクエストとは、ブラウザなどからサーバーへ渡される要求のことです。
たとえば、ユーザーがあるページにアクセスすると、
そのページで読み込んでいるCSSファイルやJavaScript、
画像などのファイルの数だけHTTPリクエストが実行されます。

CSSファイルを細かく分けると、
それだけHTTPリクエストの数が増えることになりますので、
ページの表示速度が遅く(レスポンスが悪く)なってしまいます。

対策としては、制作段階では細かく分割していても、
公開時には数ファイルに統合するという方法があります。