divでレイアウトするときのidやclassの命名について

divでレイアウトするときのidやclassの命名について

図のようなイメージ（デザイン）をもとにコーディングするとします。
太い赤線部分はデザインの一部でなく、divで囲んでコーディングをする、という意味です。

最も外側の赤線、つまりdivには既に #osusume と命名しました。
内包するdivについて、
あなたなら、どのようなid、class、命名にしますか？

例）
#osusume{ }
#osusume .divL { }
#osusume .divL .div2L { }
#osusume .divL .div2R { }
#osusume .divR { }
#osusume .divR .div2L { }
#osusume .divR .div2R { }

意味不明でしたら加筆しますのでよろしくお願いします。

No.3 ベストアンサー 回答者： KI401 回答日時： 2009/02/15 14:38

id属性やclass属性は基本的に論理的な意味で命名すべき。

例えば文字を赤くするための.redというクラス名などはよく言われる悪例だ。
なぜ赤くするのかを考えて.importantなどというクラス名をつけるのが正しい。

その意味で、#osusumeというidは悪くないと思う。
だけどそうすると、中のdivに.osusumeというクラスを振れない。
#osusumeのままで行くなら、.shohinとかだろうか。二つ繋げて「オススメ商品」になる。

で、上の画像みたいな場合でさらに具体的にidを振るなら、#whiteday,#nabeだろうか。
繋げれば#osusume #whiteday.shohinで、「オススメのホワイトデー商品」になる。
さらにその下の階層なら、左の画像の方のブロックに.shohin-imageを、
右の商品説明のブロックに.shohin-detailというクラス名を振る。
繋げれば、略。

idやclass名の振り方に正解はないので、自分なりの付け方を身につけるのが一番です。
ここで書いたのはあくまで僕のやり方なので。参考になれば幸いです。

No.4 回答者： abril 回答日時： 2009/02/15 14:43

(X)HTML側をどうマークアップするかにも依ると思いますが…

・マークアップの構成要素が不明であれば、
#osusume .item { }　…アイテム（アイテム毎に高さを決め打ちしてフロートできれば、左右に振り分けた指定は不要になります）
#osusume .thumbnail { }　…商品サムネイル（画像）
#osusume .catch { }　…商品キャッチコピー

といった感じでしょうか。.thumbnail、.catchはそれぞれ直近の親要素.itemが左だろうが右だろうがその中で同じレイアウトなわけですから、大親分の#osusumeから直のセレクタでの記述でもOKだと思います。

もし、マークアップが以下の様であれば、タイプセレクタを使う事により更にクラスセレクタを減らす事ができます。

<div id="osusume">
<ul class="item">
<li>
<img src="画像パス" alt="商品サムネイル" width="50" height="50" />
<p>商品キャッチコピー</p>
</li>
<li>
<img src="画像パス" alt="商品サムネイル" width="50" height="50" />
<p>商品キャッチコピー</p>
</li>
</ul>
</div>

・上記のマークアップの場合であれば、
#osusume ul.item li { }　…アイテム（アイテム毎にli高さを決め打ちしてフロートできれば、左右に振り分けた指定は不要になります）
#osusume ul.item li img { }　…商品サムネイル（画像）
#osusume ul.item li p { }　…商品キャッチコピー

・なお、上記マークアップの場合、親要素である#osusumeの中にulでのマークアップがこの箇所しか出てこない場合であれば、ulのセレクタからクラスを取り去り、ただのタイプ・セレクタにすることもできます。
#osusume ul li { }　…アイテム（同上）
#osusume ul li img { }　…商品サムネイル（画像）
#osusume ul li p { }　…商品キャッチコピー

・更に、親要素である#osusume自体がお奨め商品リスト以外の要素を含まないのであれば、divを取り去り、ul自体に#osusumeというidセレクタとして指定する事もできます。
ul#osusume li { }　…アイテム（同上）
ul#osusume li img { }　…商品サムネイル（画像）
ul#osusume li p { }　…商品キャッチコピー

ただし、おすすめアイテムの高さが決め打ち（上記での高さ決め打ちは、原則としてoverflowプロパティによるスクロールを併用します）できない場合は、商品の数が左右2つづつ一行で終わりの場合を除き、商品１（左）商品２（右）商品3（左）商品4（右）…という様に複数行に続いて行くとなると、アイテム毎の高さによって左右の高さは揃わなくなります。その場合は、2アイテムづつ（一行）毎にブロックを区切らなくてはならない場合もあるので、最後のul#osusume～というパターンは使用できません（出現箇所が1回で終わらないので）。

クラス名、id名には「左」「右」とかの物理的（スタイルそのものを示す様な）なネーミングよりも論理的（内容をイメージできる様な）ネーミングの方が推奨されます。もしも現在のレイアウトを左右に逆転させなければならなくなった時、ネーミングと実際の構造が矛盾してしまうという何とも気持ちの悪い状態になります。
また、クラス名・id名に「Div」などのタグ名を付けてしまうのも紛らわしいですし論理的ではないのであまりお奨めできません（この場合も、マークアップがdivから他の要素に変わった場合など、ネーミングと実情が矛盾する事になりますね）。

この回答へのお礼

皆様、ご回答ありがとうございます。

大変参考になりました！

本コメントを持ちまして皆様へのお礼とさせていただきます。

お礼日時：2009/02/16 17:07

No.2 回答者： grumpy_the_dwarf 回答日時： 2009/02/15 14:33

普通は

<dl class="osusume">
<dt><img チョコの写真>
<dd><em>ホワイトデーにおすすめ！</em>早期割引やってます
<dt><img 鍋物の写真>
<dd><em>みんなで囲むあったか鍋!</em>カニ、モツ、ふぐちり他
</dl>

で済む話ですが、なぜDIVに？
ちゃんとリストにすれば、クラス名に苦慮しなくても意味が分かる
でしょ。

No.1 回答者： natsukagur 回答日時： 2009/02/15 11:30

<div class="size用 x指定用 y指定用">

<div class="size用">
<img >
</div>
<div class="size用 ｘ指定用">
<h3>title[new]</h3>
<span>body</span>
</div>
</div>

相対位置指定で用途ごとにクラスをわけるかなぁ。
その質問の記述だと全部ＩＤ状態なので