記事のカテゴリーによるクラス指定的な何か

通常のblogのように*1記事をカテゴリーによってディレクトリ的に分類するとしたときに、カテゴリーに応じて記事のスタイルが変わると良いかもしれない。大きく変化させる必要は無いけど、例えば見出しの背景色が変わるとか。例えば[Widget]は背景が暗めで、[App]ではメタル調にしてみるとか。
各記事はdiv.entryに入れることになると思うのだけど、カテゴリーによる分類もdivの属性として指定することで、CSSでサクッと切り替えられる。
尤もclassはentryがすでに指定されているので使えないし、id(やname)は一意であるべきだから、繰り返し登場するカテゴリーの指定には使うべきではない。カテゴリーごとにclassを指定(つまりdiv.entry_widget, div.entry_app)みたいな形にするのは、共通する部分をまとめあげられないからやっぱり不適当。divを入れ子にしてdiv.entryの子にdiv.widgetを作るのも、属性を付与するだけのために階層を深くするのはあまりスマートな手段ではない。


というわけで、独自の属性を指定してCSSの属性セレクタを使うのが穏当だろう。.entry[ore:category="widget"]という形式。独自属性なので原理主義的にはnamespaceは指定した方が良いっぽい。
WordPressではカテゴリをツリーにできるらしいのだけど、その場合、親子のカテゴリをリストとして属性にすれば良いかもしれない。<div class="entry" ore:category="mac widget">みたいな感じにして、CSSの方では.entry[ore:category~="widget"]のようにする。widgetとappの両方に適用したいスタイルは.entry[ore:category~="app"]に指定すれば良いことになる。


あと、contentを使ってcategory属性に合わせてアイコンとかを付け足しても面白い。

*1:はてダではなく、という意味。