HTML5によるCSSのコーディング方法や命名規則について質問です。
今までは以下のようにしていたのですが
<div class="entry">
<h1 class="title">タイトル<h1>
<p class="date">2014/03/16<p>
</div>
他のサイトやWordPressを見ると
<div class="entry">
<h1 class="entry-title">タイトル<h1>
<p class="entry-date">2014/03/16<p>
</div>
というように、子要素に対して接頭辞を付けるコーディングをよく見かけるようになりました。
これはCSSの中でセレクタの数が増えないようにするためにこうしているのでしょうか?それともHTML5の規約とか何かしらのルールで決まっているのでしょうか?
皆さんのコーディング方法と併せて教えて下さい。
みんなの回答 8 件
普通により意味が明確でわかりやすいからでしょ?そこが根本的な理由で後は副次的理由に過ぎないよ。
クラス名重複による意図しないカスケーディングを防ぐためですよ。
他の要素で .entry というクラス名を使う場面は少なからず出てくるわけで、
更新や機能追加で複雑化して行って、担当が引き継いでとかなると、
何気なく使ったクラスで予期しないスタイルが反映されたりするわけです。
だから親要素の名前をプレフィックスとして引き継いでおけば、
まず前述の間違いは起きにくいだろうという設計思想です。
.titleはエラーでるからやめれ
単に重複を避けるため。LESSなりSASSなりで入れ子にして記述しておけば名前がカブっても大丈夫なようにはできるけど、やっぱり意図しない動作を防ぐにはこの方がいい。
汎用性があまりないclassやidに対しては、後者で命名しちゃうね。独自ルールだとlower camelで。
あと、コーディングスキルが低い人や、サイト更新等で頻繁に誰かが触るだろうと想定される場合は、考えずに適当に命名された場合に被ってしまうのを防ぐ意味もある。
普段のコーディングでは、CSS signatureとOOCSSを組み合わせることが多い。サイトの規模でどっちに比重を置くか変える。
Sassを使ってる関係で適度にCSSを分割したいから、この組み合わせがちょうどいい。
小セレクタ(.entry>.title)や classセレクタの複数指定(.entry.title)に対応してない「腐った牛乳」と呼ばれる残念なブラウザがあります。
ごく一部の残念なユーザーさんは未だにこの腐った牛乳を使用しているので、未だに対応を求められることもしばしば。
まぁ、HTML5で書くような案件はそんな腐った牛乳なんて無視でいいんでしょうけど、
いちいち書き分けるのも面倒くさいので、全ての案件で後者の書き方をしている、という可能性が微レ存。
このての話題はけっこう有名な話なので、回答を待つよりもコーディングルールで検索した方が早い。特に正解というものはないんだけど、近年では、トピ主のような命名規則はバッドプラクティスだと言う人は増えてるね。なぜバッドプラクティスなのか。そこは頭を絞って考えるところだね。
子要素がネストしていくと子要素の中にtitleやdateといった汎用的な名前が出てくる可能性があるから。(sassを使っていても防げない)
<div class="entry">
<h1 class="title">タイトル<h1>
<p class="date">2014/03/16<p>
<div class="content">
<div class="title">うほっ</div>
<div class="body">いい男</div>
</div>
</div>
子要素のクラスが親要素の属性を引き継いでいれば競合する可能性が格段に減るので、無意識的にこのようにコーディングすれば自ずとトラブルは減ります。
また動的なアプリケーションの場合、コーダーもエンジニアもViewを触る可能性があるので、一律の規則を設けておけばコミュニケーションエラーも起きにくくなります。
もちろん構造がネストしなかったり、規模が小さいサイトならば問題にはならないでしょう。
関連するトピックス