CSSレイアウトで組む事が一般的となった昨今、記述するCSSの量が増えてきたので複数のCSSファイルで管理することが多くなってきました。
どういう基準でファイルを分割するかはそれぞれですし、サイトを見ても様々なやり方があるようです。
基本的にはどこに何のCSSが書いてあるかわかるような仕様書があり、分かりやすければどんな分割の仕方でもいいと思います。
今回は、自分がよくやるCSSファイルの分割の方法をまとめてみました。あくまで自分がよくやってるものですので、こういうやり方もあるよと教えていただけますと嬉しいです。
なお、説明文中に記載しているCSSのファイル名は自分がよく付けている名前なだけです。
分割しない
分割の話をしておいていきなり何ですが、分割しない時もありますよね。スタイルのリセットから全部まとめます。
ページ数が少ないキャンペーンページ等に使っています。記述するCSSが少なそうなら分割しないで十分ですね。
2ファイル分割（リセット＋その他）
そこそこのページ数の時は2ファイルでいきます。最近は2ファイルにすることが多いです。だいたい以下のように分けてます。
- default.css リセットのCSS・基本スタイルとなるCSSを記述しています。
- common.css レイアウト・ページ独自のCSSまで全て記載
サイトのデザインや規模によってはcommon.cssの量が多くなってしまいますが、自分のサイトや管理するのが自分だけならこれぐらいでもいいかなと思います。
3ファイル分割（リセット＋トップページ＋その他）
上記の物からトップページのCSSファイルを増やしたタイプです。
- default.css
- common.css
- index.css トップページのCSS
トップページはレイアウトが複雑になる事が多く、記述量が増えるのでこのように分けることがあります。
ディレクトリごとに分割
ページ数が多い時は、そのディレクトリごとに分割することもあります。
1ページごとだと多くなりすぎるので、ディレクトリごとにCSSファイルを作成します。主に複数人で制作する時に使用してます。
- default.css
- common.css サイト全体に使うCSS
- index.css トップページのCSS
- about.css aboutディレクトリのCSS
- product.css productディレクトリのCSS
- news.css newsディレクトリのCSS
ディレクトリがあればこれ以上に増えます。
メリットとしては、記述しているCSSがどこにあるか分かりやすいことと、複数人でサイトを制作している時に
それぞれ違うディレクトリを制作していればあとでCSSの同期を考えなくて済みます。
デメリットとしては、どんどんファイル数が増えてしまうことでしょうか。
特定のCSSだけ分割
実際には自分で使用した事がないのですが、定期的に特定の部分だけ更新するサイトにいいかもしれません。今まで紹介してきた分割の仕方に加えて・・・
- color.css 色の指定を集約したCSS
色の指定をこのCSSファイルに記述します。季節で色だけ変えるとか背景を変える場合などは、それだけのCSSファイルを用意してもいいかもしれませんね。
印刷用CSS
上記に加えて印刷にガッツリ対応する場合は印刷用のCSSを用意します。
- print.css 印刷用CSS
全体的ではなく部分的な対応でしたら、個別のCSSに一緒に記述してしまいます。
他にどのような分け方があるんでしょうか。気になります。
コメント