CSSコーディングスタイル
http://www.r-styles.net/mt-archives/weblog/webdesign/r-css-coding-styles.htmlというエントリを読んだのですが、自分は構造化してCSSを組む以外考えたこと無かったなーと感じました。
尚、HTML(XHTML)が正しく構造化されている事が前提としてあります。
CSSのリファクタリング
自分の場合、基本的にはCSSの再利用性は大きく拘らず、意図しない場所にスタイルが適用されてしまう方をリスクと考えます。したがって、次のように深くセレクタを設定し、適用範囲を明確にするようにしています。
div#global_navi ul { position: absolute; top: 7px; left: 0; height: 48px; width: 840px; } div#global_navi ul:after { content: "."; display: block; clear: both; height: 0px; visibility: hidden; } div#global_navi ul li { float: left; width: 116px; height: 52px; margin: 0 2px; } div#global_navi ul li a { display: block; width: 116px; height: 48px; }
このようにセレクタを深くする事のメリットは、HTMLの構造とCSSの構造が正しくリンクする事です。CSSをメンテナンスしていく中で、どうしても困るのが「このスタイルはどこに適用されているの？」となる事です。変更したら意図しない所でレイアウトが崩れたり、使ってないと思って消すとありえないレイアウト崩れを発生される要因となりるわけです。
逆にデメリットとしては、再利用しにくい点です。とはいえ、同じスタイルを構造が違う別の場所あちこちで使いまわさなければならないケースは意外と少ないです。あったとしても、セレクタの書き方や共通化して再利用したいスタイルの名前をclassなどで指定すれば解決します。
例えばこんなスタイルがある箇所で発生しました。
div#some_contents div.list ul {/* STYLE */}
これがdiv#another_contents div.list ulでも同じように適用したいとなるわけです。まずはコピペされます。
div#some_contents div.list ul {/* STYLE */} div#another_contents div.list ul {/* STYLE */}
div.some_type_list ul {/* STYLE */}
もしくは次のように書くこともできます。
div#some_contents div.list ul, div#another_contents div.list ul { /* STYLE */ }
オブジェクト指向的な分類は好ましくない理由
該当エントリでおもしろいな−と思ったのが、「プロパティ指向（仮称）」や「カテゴリ指向（仮称）」といったスタイルです。
また、エントリでのオブジェクト指向的なスタイルとは次のように書いてます。
細かく分類して、HTML上でclassを複数付けるなどで完成させるスタイル。
場合によってはプロパティ指向（仮称）的になると思われる。
実際に使うには、id, classの命名規則等、設計段階で工夫しないと管理し難いと思われる。ある程度細かく分割して、HTML側でどれを使うか選ぶ感じがベターかも。オブジェクト指向という言葉を使うのは微妙ですが。
名前が相応しいかはともかく「細かく分類して、HTML上でclassを複数付けるなどで完成させる」とあり、CSSがHTMLに装飾を行う属性のように振舞っています。これは一見正しいようにも思えますが、個々のスタイルでは正しくても、classを使ってスタイルをまとめている時点で間違った用法ではないかと思います。
以前、自分も複数のclassを１つの要素に適用するスタイルを好んでいた時期がありました。ですが、CSSとHTMLがしっかり分離されておらず、スタイルと構造の境界が曖昧だったと気づきました。極端な言い方をすれば、「全部styleでベタ指定しても変わらない」のです。
自分はstyleでベタ指定するスタイルも状況によってはありかと思います。例えば、本当にそこだけでしか適用されず、組み合わせるスタイルも少ない場合です。style="color:red;"などたまにやります。また、構造に絡むようなレイアウトがなければ可読性も悪くなる訳じゃありません。CSSが分離して記述できるメリットは構造化文書はさておき、CSS内でレイアウトに関する情報が集約されていることです。
