CSSとマークアップ

http://www.akiyan.com/css_every_propaty_order_system

たまーに訳が分からなくなりかけているCSSをいじる事があり、苦戦を強いられる。特に他人が書いたコードを読み下すのは一苦労である。そんな時、便利かもしれない。

ところで、idやclassを付けるのは、もちろんCSSでハンドリングするという事もあるが、HTMLでは足らない意味付けを行なう事が出来るという考え方もある。XHTML等であればXML拡張を行なう事が出来るが、互換性などの問題や何らかの事情でHTML4でマークアップしたいとか言う場合に、idやclassはかなり役立つものになり得る。

CSSをidやclassに関連づけられた一つの意味情報と考える場合は、プロパティ別整理というのは逆に混乱を招くかもしれない。情報が分散する為、navigationのスタイル情報は？と言う問いに、簡単に答えられなくなるわけだ。grep検索の例が載っているが、前述のスタイルは？の問いに答えるという意味では、正直スマートであるとは思えない。

また、CSSの並びや構造には、制作側での意図がある事も多い。独自ルールかもしれないし、適用時には考慮されないのだが、そこには確かに意味があるといえる。それは、上記のidやclassに関連づけられた意味情報の範疇に入り、プロパティ別整理を実行すればそれらは完全に失われる。HTMLが、当初は文書の意味付けを目的にしていたが、見た目重視の拡張と表現スタイルのみを取り出したマークアップで再三問題になったことを、何となく思い出させる。CSSはあくまでスタイル情報なのだから、HTMLのようにもともと文書として意味のあるものをマークアップする事とは違うのだが…*1。

しかしメンテナンス時には便利だ。どこどこのプロパティをどうこうしたい、なんて場合は即座に見つけられるし、特定のスタイルを知る為だけに検索しなければならないのはどうかと思うが、より細かい条件がある時には、検索条件をうまく選ぶ事でかなり柔軟に使いこなす事が出来そうである。

参照先では相互変換出来るツールも公開されているので、相互に使い分けながら使用すると良さそうだ。

*1:要するに、自分の心にある事柄をうまく言葉に出来ていない