CSS管理を少しだけ便利にする小技

2008年6月 1日 00:22

最近使っているCSSの管理の方法を書きたいと思います。
みなさんも色々工夫をしていると思いますが、CSSの管理はなかなか大変です。
それも、他人が書いたCSSを読むのはとても困難。
というのも、プログラムほどCSS同士の関連性が見えないせいだと思います。

そこで、色々なところで、後から見てもどんな処理をしているのかが分かるようにコメントをつけます。
その際、ある塊ができると思います。
たとえば、あるレイアウトを記述している際に、「#container h2」とか「#container .text span」みたいに「#container」を基準としたCSS群なんかができると思います。
そのCSSを記述する上部に、「#conainerの記述部分はここだよ」的なコメントを入れることが考えられます。
そのコメント部分に「[=toNext]」みたく、タグ(?)を挿入します。
また、この部分以外にも、各コメント部分に上記のタグのようなコメントを挿入するわけです。

これをすることのメリットは、あるプロジェクトなんかでCSSの記述方法のルール付けの際に、「CSSの頭だしは「[=toNext]」で検索すること、みたいにルールを作ります。
この方法に従って描かれたCSSファイルを閲覧するときは、この頭だしのコメントを検索することで各コメントごとへ飛んで行き、ざっとファイルの中身を把握するのに役立てる、ということです。

また、その頭だしされたコメントの中に、そのコメント以下に続く処理がなんなのかを書いておくと、さらに可読性があがると思われます。

・・と、最近やってることを書いて見ました。
みなさんも、こんな工夫をしてるよ、ってことをコメントくださるとうれしいです(*'-')
ちなみに、コメントのサンプルはこんな感じ↓

▼EntryMore▼