-
ID:pcdLJX さんの質問

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 件

ID:55oONN さんの回答

普通により意味が明確でわかりやすいからでしょ?そこが根本的な理由で後は副次的理由に過ぎないよ。

ID:1RgX0v

意味のわかりやすさではどっちも同じでは?
.entry-title

.entry .title
の違いでしょ。

ID:55oONN

↑分かってないね。
これだからコーダーは困る。
オブジェクト志向でプログラム設計出来るようになってから、また、コメントの意味を考えてみろ。お前が出した例は働きは同じだが、その働き方の意味が違うわ。

ID:lW.Qcf

自分が分かってるからってどうしてこういう横柄で不愉快な物の言い方が出来るんだろうね。よっぽどお偉いお方でいらっしゃるのだろうか。

ID:55oONN

↑いや、ぶっちゃけ俺もよく分かってない

ID:szrLfb

コメ主が痛い

ID:ekSUAP さんの回答

クラス名重複による意図しないカスケーディングを防ぐためですよ。

他の要素で .entry というクラス名を使う場面は少なからず出てくるわけで、
更新や機能追加で複雑化して行って、担当が引き継いでとかなると、
何気なく使ったクラスで予期しないスタイルが反映されたりするわけです。

だから親要素の名前をプレフィックスとして引き継いでおけば、
まず前述の間違いは起きにくいだろうという設計思想です。

ID:pcdLJX

名前が長くなるってのはあまり問題視されないんですかね。
WordPressでいうと、カテゴリーが「entry-utility-prep-cat-links」とか長くなってましたが。

ID:55oONN

↑名前が長くなることでデメリットなんて微々たるファイルサイズが増える程度だろ。長さとかじゃなくてわかりやすい名前をつけることが大事。

ID:ekSUAP

まあ、何事のルールも完璧なものはないので。
ただ、ユニークなクラス名というのも、あくまで設計思想のお話なので、
アナタが見つけた長いクラス名も、アナタが設計する際は、カスケーディング記述と上手くミックスして設計すれば、アナタの設計思想に合致するような記述ができるんじゃないでしょうか。

ルールは従うことも大切ですが、最適化のためにアレンジしていくことも大切なんじゃないですかね。

ID:R02BT8 さんの回答

.titleはエラーでるからやめれ

ID:pcdLJX

よく使ってるのですが、どういう時にエラーになるのでしょうか?

ID:rLRQyK さんの回答

単に重複を避けるため。LESSなりSASSなりで入れ子にして記述しておけば名前がカブっても大丈夫なようにはできるけど、やっぱり意図しない動作を防ぐにはこの方がいい。

ID:s.aHjs さんの回答

汎用性があまりないclassやidに対しては、後者で命名しちゃうね。独自ルールだとlower camelで。
あと、コーディングスキルが低い人や、サイト更新等で頻繁に誰かが触るだろうと想定される場合は、考えずに適当に命名された場合に被ってしまうのを防ぐ意味もある。

普段のコーディングでは、CSS signatureとOOCSSを組み合わせることが多い。サイトの規模でどっちに比重を置くか変える。
Sassを使ってる関係で適度にCSSを分割したいから、この組み合わせがちょうどいい。

ID:gsE3Us さんの回答

小セレクタ(.entry>.title)や classセレクタの複数指定(.entry.title)に対応してない「腐った牛乳」と呼ばれる残念なブラウザがあります。
ごく一部の残念なユーザーさんは未だにこの腐った牛乳を使用しているので、未だに対応を求められることもしばしば。

まぁ、HTML5で書くような案件はそんな腐った牛乳なんて無視でいいんでしょうけど、
いちいち書き分けるのも面倒くさいので、全ての案件で後者の書き方をしている、という可能性が微レ存。

ID:gsE3Us

typo
×小セレクタ ○子セレクタ

ID:w2schh さんの回答

このての話題はけっこう有名な話なので、回答を待つよりもコーディングルールで検索した方が早い。特に正解というものはないんだけど、近年では、トピ主のような命名規則はバッドプラクティスだと言う人は増えてるね。なぜバッドプラクティスなのか。そこは頭を絞って考えるところだね。

ID:5C04Cx さんの回答

子要素がネストしていくと子要素の中に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を触る可能性があるので、一律の規則を設けておけばコミュニケーションエラーも起きにくくなります。

もちろん構造がネストしなかったり、規模が小さいサイトならば問題にはならないでしょう。

ID:mD847Y

子セレクタ

最終更新日:2014-03-17 (4,468 views)

関連するトピックス

ページ上部に戻る