メンテナンスを考慮したCSSの上手な組み方

ここのところ、デザイナーがデザインしたHTMLをPHPやPerlでテンプレート化して・・・っていう作業が比較的多いんですが、ちょっと感じたことをメモ。
どうすれば効率よく「設計→デザイン→製作→メンテナンス」が出来るかをメモ。


プログラムやCSS、他何でもそうなんでしょうが「自由」っていうのは結構怖い時があります。
例えば、プログラムでの変数名やメソッド名、プロパティ名。
基本的に命名規則を設けて、大文字や小文字まで統一していれば非常に管理がしやすい。
DBでもデータベース名、テーブル名、ビュー名(PostgreSQL)などもそうかと。
その感覚でCSSを考えると、非常に面倒・・・ってことが最近ようやく分かってきました。

CSSの大きな特徴

CSSは、大きく分類すると3つに分かれると思います。

  • HTMLタグに対するCSS
  • >>body { background: url(xxx.gif); } … など
  • Class
  • >>.center { text-align: center; } … など
  • 擬似Class
  • >>#cener { text-align: center; } … など

タグに対するCSSは直感的に分かりやすいんですが、タグ全体に対するCSSになるので、本当に基本的な部分だけになるんじゃないかと。
例えば、

* {
margin: 0;
padding: 0;
font-size: 100%;
}
body {
font-color: #000000;
}

って感じの。
で、次が一番問題のClass擬似Classの扱い方。
個人的な解釈なんですけど、Classと擬似Classは以下のように使い分ようかと思ってます。その方がCSSをメンテナンスする上で分かりやすいかな・・・・と。
例えば、次のソースがあった場合。

<html>
<head>
...
</head>
<body class="center">
<table>
<tbody>
<tr>
<th class="center">\</th>
<th class="center">列見出し1</th>
<th class="center">列見出し1</th>
</tr>
<tr>
<td class="center">行見出し</td>
<td>項目1</td>
<td>項目2</td>
</tr>
</tbody>
</table>
</body>
</html>

ごく普通の3×2の表なんですが、[ class=center ] を多用してます。(意図的に)
この[ class=center ]は、文字通り[ 中央に寄せる ]っていう意味があるとして使ってることにします(実際にはMacIE?かIE全てでは無効だったような気もしますが。。。)
こういう簡単な例では、ミスって起きないような気もするんですが仮に、以下のような操作を行うとどの部分に影響が出るのかをシミュレーション。

.center {
text-align: center;
}

↓このように修正

.center {
text-align: center;
background: #336699;
color: #ffffff;
}

こんなことするわけ無いんだけど^^;;
予想通り背景までも変わっちゃいます。

上手なCSSの組み方

結論として、下記のようにすれば比較的柔軟なCSSメンテナンスが可能となるかもしれない。
CSSに対して細かな知識があるわけではないですが、Win用とIE用で切り替えたりする必要があるようなので、2つ・・・ってのがベストなのかもしれません。

CSSのimport機能を利用して、階層構造を保持する

例えば、サイト全体で使用する「レイアウト」的なCSSは、[ layout.css ]などで指定。
各ページのCSSで import(layout.css) させることで対応させる

Classと擬似Classを完全に使い分ける

Classは、サイト全体で共通して使用するものだけに使用するようにする。
例えば、[ .small { font-size: 70%/130%; } ] などはサイト全体で使用出来るので、Classとして使用。
また、[ #menu_background { background: #336699; font: #ffffff; } ]などは、ページのメニュー部分だけに指定するCSSなら、「特定の部分だけに対するCSS」という意味合いも込めて擬似Classを使用する。
このようにClassと擬似Classを綺麗に使い分けることで、他に及ぼす影響も簡単に想像することが可能になる。実際、プログラムでもこんな感じでやるはずですし。(語弊はありますが)

HTMLソース内で、終了タグ(閉じタグ)にコメントを残す

CSSデザインのHTMLソースを書いていると、</li>や</div>といった閉じタグをかなり頻繁に使うと思います。
他にも</span>や</em>、</ul>、</ol>などもあるはずですが。
こういったものを以下のようにコメントで書いておくと、後々メンテナンスする時に分かりやすいものです。

...
<body>
<div id="container">
<div id="header">
...
</div><!--/header-->
<div id="main">
</div><!--/main-->
<div id="footer">
...
</div><!--/footer-->
</div><!--/container-->
</body>
<!-- container start -->
<div id="container">
...
</div>
<!-- container end -->

っていう書き方もあると思いますが、好みで前者を使ってます。
ちょっとした工夫で、CSSのメンテナンスも簡単になって便利です。