僕のCSSマークアップポリシー

HTML+CSS Templatingに触発されて僕の好みのマークアップ方式を書いてみる。

僕の基本的なポリシーは重複した定義を書いてもいいから、そのスタイルが適用されるスコープを限定的にする、です。簡単に言えばエリアをDIVにしてidつけて、そいつをアタマに継承を入れる。

div#footer {
}
div#footer ul{
}
div#footer ul li{
}
div#footer ul li a{
}
/***とか***/
.hoge_tbl {
}
.hoge_tbl th, 
.hoge_tbl td {
}
.hoge_tbl td .foo {
}

こうやってスコープを区切るのが好き。だってキモいんだもん。画面ごとに似たようなマークアップを作っちゃうこともあるんだけど、ぐちゃぐちゃになるよかマシかなーと思ってるぜ。KISSに打たれて眠りたいぜOH YEAH。

CSSセレクタをうまく使えば、｢基本的なスタイル｣＋｢拡張したい独自スタイル｣というマークアップができるようになる。たぶんこれがメンテしやすい。

自分が作っているのは大規模サイトでもないので、1個のCSSで間に合うことがほとんど。これが分担していると、ファイルを別にしないと作業になんないだろうからimportして利用しないと｢このマークアップをしたのは誰だぁ！｣｢どうしてこうなった｣状態になるんだろうな～。