CSSファイルの内容構成
CSSファイルの中身は、「セレクタ{プロパティ:値}」の繰り返しですから、実にシンプルです。しかし書式が単調であるがために、どこに何のスタイル指定があるのか探し出すのに苦労します。ファイル内容を理解しやすいよう、「CSSガイドライン」の中でファイル内容の構成について明記しておくと便利です。
また、それとは別に、CSSファイル内で構成を示しておくというのも有効です。下記サンプルのように、コメントで目次や見出しを付け、ファイル構成を示しておけば、CSSファイル内の検索性を高めることができます。サンプルでは、左端を見ればコメント文であることが分かるように1行ごとのコメントに「/*」「*/」を付けていますが、フォーマットに決まりがあるわけではありません。視認性や可読性が高くなるよう工夫することが大切です。
@charset "UTF-8";
/* ---------------------------------------- 目次 */
/* ファイル情報 */
/* ブラウザ初期化スタイル */
/* 汎用クラススタイル */
/* 領域定義スタイル */
/* 領域別スタイル */
/* ---------------------------------------- ファイル情報 */
/* Page Layout CSS v1.02 */
/* ファイル名：page-layout.css */
/* 作成日：2008年8月23日 */
/* 更新日：2008年12月24日 */
/* 作者: Maya Uegaki */
/* ---------------------------------------- ブラウザ初期化スタイル*/
body {
margin:0;
padding:0;
}
/* ～以下略～ */
CSSファイルの管理方法
「ファイルをどのように管理するか」といった問題も、CSS設計の際に悩ましいポイントの一つです。これには、1つの外部CSSファイルですべてのスタイルを定義する「ワンシートアプローチ」と、複数の外部CSSファイルで役割を分担してスタイルを定義する「マルチシートアプローチ」という2つの考え方があります。
「ワンシートアプローチ」には、1つの外部CSSファイルでスタイルを一元管理することができるというメリットがありますが、コードが長くなりすぎるといった問題が起こりやすくなります。この問題は、開発環境によって解決できる場合もあります。例えば、DreamweaverのようなWebオーサリングツールやFirebugのようなツールを使えば、CSSファイルのどこにどんなスタイルを指定しているのか即座に調査することができます。
逆に、こうしたツールを使わない場合には、編集作業がやや困難になるわけですが、「マルチシートアプローチ」をとれば、スタイル指定を役割ごとに分割するため、各CSSファイルのコードは短くなり、ツールを使わなくても内容を理解しやすくなります。
例えば、ブラウザの振り分けに使用する「フィルタ用CSS」や、ブラウザのデフォルトスタイルをリセットする「リセットCSS」、「ハック用CSS」など、役割ごとにファイルを分割して管理します。しかし、あまりにファイル数が多くなると、今度はファイル管理が煩雑になるという問題が発生するため注意が必要です。
「ワンシートアプローチ」と「マルチシートアプローチ」のどちらを取るかについては、メンテナンス性や開発環境などを検討したうえで決定し、ガイドラインに記しておきましょう。特に「マルチシートアプローチ」を取る場合には、どのファイルがどの役割を担当しているのか明記しておくと、メンテナンスの担当者にとって役立つものとなります。
