メンテナンスを考慮したCSSの上手な組み方
2006年12月29日ここのところ、デザイナーがデザインした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">列見出し１</th> <th class="center">列見出し１</th> </tr> <tr> <td class="center">行見出し</td> <td>項目１</td> <td>項目２</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のメンテナンスも簡単になって便利です。