【id名、class名はどの程度までつけていますか？】

ネーミングセンスがないということもあり、今作っているWebページは更新が入りそうな箇所以外はほとんどid、class名をつけずに、子孫・隣接セレクタのみで要素を特定する方法でCSSを書いています。
変更が入りそうな箇所や1ページ内で何回か使用されており他の親となりうる要素（例：section）には命名しているのですが、最低限、というところです。

他の方のソースを見ると、h1やpに至るまで細かくネーミングされているもの、デザイン目的でネーミングされているものなどがあり、どれがベストなのか少し悩んでしまったので、皆様の方法をお聞きしたいです。

なるほど…。
確かにあまり長々と書かれているとわかりづらいですものね。
ご意見ありがとうございます。

俺もBEM採用しようとして仕事で使ってみたんだけど、かなり利便性が悪くて止めた。理由は

• 命名だけで時間が掛かる
• HTMLが長くなって複雑になる
• 共通する箇所も命名し、コーディングしなくてはいけないのは不便
• ↑はコピペならその分、コードが増える
• Sassやlessを使う手もあるが、そもそもHTMLやCSSは「手軽さ」がウリであり、それを殺してガチガチに固めるのはかえって扱いづらくなる
• 自分以外の他人の学習コストがかかる

との結論から、OOCSSの考え方に戻した。

1年後の自分は他人と言うけど、BEMでも一緒だよ。ソース見ないと思い出せないもん。単に

.block--element__modifier
か
.block .element .modifier
の違いなだけで。

1年後の自分が他人といったのは、シンプルセレクタとか使わない理由で、
ソースを読むのは前提で、読みやすいようにって事です。
あと、Sassは使いまくってる。
それにHTMLの歴史はSGMLとかそんなに知らないけど、CSSは「手軽さ」はウリにしてないよ。
CSSを良くするという事は、機能を追加するという事で方針は一致してるので、今のCSS Level3が全部勧告になったらかなり複雑ですよ。変数とか計算もそろそろ入るし、正規表現とかも議題にあがってたし。

共通の箇所（ボタンとか、フォームとか）そういうパーツに関しては、OOCSS使ってるので、基本BEMでOOCSSの方が明らかにいいとこはOOCSSって感じだね。

手軽さがウリって書いたのは歴史的背景じゃなくて、制作側の意見としてね。誰でも使いこなせるという意味で。

それに君の解釈を見ると、もうそれってプログラミングの世界だよね。（Sassやlessはそうとも言えるが）プログラミングになると、それこそHTML自体もモジュール化する必要があると思うし、色んな技術が入って余計に複雑化すると思うんだ。

もちろん自分一人でやるならプログラミング化しようがどう作ろうが勝手だと思うけど、仕事でやるなら最低限「他人が理解できる」コードを書くべきだと思うんだよ。

BEMとOOCSSが混在した状態でソースが読みやすいかどうかって聞かれたら、俺は難しいと思うな。もちろん、OOCSSにBootstrapなどのCSSフレームワークを使っているなら、知識がある人は分かるだろうけど。

でもまぁ、トピ主のような悩みは未だに持ち続けてるよ。「あとから見て分かりやすいコード」は永遠のテーマだと思う。だからBEMを否定しないし、もっと多角的に見た勉強が必要だと思ってる。

BEM…私はちょっと苦手なタイプで（長い命名が個人的にわかりづらく感じてしまうので…）敬遠していたのですが、便利な面もあると思うので、これから少しずつ慣れてみます。
ベストなのは、わかりやすい命名でOOCSSとBEMを使い分ける、という感じでしょうか。
ご意見ありがとうございます。

>手軽さがウリって書いたのは歴史的背景じゃなくて、制作側の意見としてね。誰でも使いこなせるという意味で。
これは個人的な解釈じゃなく、CSSの仕様がそうなってる。
個人的には、誰でも使いこなせなくていいと思ってる。プロが使いこなせればそれでいいんじゃないかな。簡単に使う分には簡単なの使ってればいいと思う。フォトショだって誰でも使えるけど、デザイナーが作ったものを他の人が触んなって思うんじゃない？

> HTML自体もモジュール化する必要があると思うし
Web Componentsが結構前から話題ですよね。

>最低限「他人が理解できる」コードを書くべき
ここが難しいところですね。他人をどのレベルに合わせるのかって所で、レベルの低い人に合わせてたら、その人はいつまでもレベル上がらないし。

個人的にはOOCSSで一つの要素に対してクラスがいっぱいついてて、複数書き換えようと思ったら、コード検索しまくるみたいなのほうがだるいなって思ったのと変更したときの影響範囲が追いづらいのでBEMにしてる。あとBEM使うならブロック毎にファイル分けするのは必須かな。
どんなサイトでもこのクラスはいるよねみたいなのは、OOCSSの方が向いてると思うけどね。

＞他人をどのレベルに合わせるのかって所で、レベルの低い人に合わせてたら、その人はいつまでもレベル上がらないし。

新しいコーディングを模索する最中、毎日何十とサイトのソース見てたんだけど、どこも酷いよ。BEMは皆無でOOCSSにすらなってないのばかり。大手もそう。大手だから個人でCSS管理してないだろうし、命名規則もあるはず。なのに、大抵”自己流”なところを見ると、規則や概念よりも制作スピードを優先している気がしてる。

＞複数書き換えようと思ったら、コード検索しまくるみたいなのほうがだるいなって思ったのと変更したときの影響範囲が追いづらいのでBEMにしてる。

うん。だから俺が1コメント目に書いたようなソースでいいんじゃないかな。ブロック単位では固有のクラス名を付けて、共通の箇所は初期のクラスを付けるとか。BEMで1に書いたソースを再現すると以下のようになって、非常に見づらいとは思うよ。これでもまだシンプルな方だし。

<article class="company">
<h1 class="company--title">会社概要</h1>
<section class="company--section">
<dl class="company--item">
<dt class="company--item--title">社名</dt>
<dd class="company--item--value">W3Q株式会社</dd>
</dl>
</section>
</article>

正直もうMicrodataとかWAI-ARIAしっかり対応してたり、data属性つけまくってたりすると、HTMLを見やすくキープするなんて不可能なんで、HTMLの見やすさは気にしてない。

まぁ結局何人で書いても一人で書いたようにできるようなルールがしっかりできてればなんでもいいと思う。
出来上がった概念使ったらルール化が楽ってだけで。

大手サイトでも、たしかにきちんと命名されていないようなものはありますね…。
参考にしようと思って様々なサイトを覗きにいきますが、正直参考になるようなサイトがあまり見つからない、というのが現状です…。

＞何人で書いても一人で書いたようにできるようなルールがしっかりできてればなんでもいいと思う。

その通りだと思います。

あまり大規模だとそもそもルールが共有されてないって問題はあるでしょうね。制作会社に新規構築頼んで、その時はしっかりコーディングガイドラインあったとしても次の更新で、ちょっとした事だからってフリーの人にたのんで、コーディングガイドラインは特にないですってのはよくある問題だと思う。

大手企業のWeb担当者なんてコロコロ変わるから、ルールなんてすぐ崩れるよ。現状、出ているいくつかのアプローチ手法で十分だと思うけど。

私も結局どうでもいいと思ってる。サクッと仕事として済ませる方を優先。ただ自己サイトや自社サービスサイトなら相当こだわる。

たしかに、サイトの規模や更新頻度によっても変わりますね。

＞私も結局どうでもいいと思ってる。サクッと仕事として済ませる方を優先。

お気持ちはとてもわかります。
スピードだけを見れば、いちいち悩んで手が止まるより、多少わかりづらくても独自で命名していった方が圧倒的に早いですよね。
ただ、後々のことを考えると、やはり完全にどうでもいい、というわけにはいかないかなと…。
自分が運用していくのであればまだしも、お客様に出来上がったものを丸っと渡して運用してもらうのであれば、他者が混乱しないレベルの命名は最低限必要かなと思っています。

まあー悩みたい人だけ悩んでがんばってねって感じかな。で、効率の良い方法を教えてもらってケースバイケースで利用させてもらうよ。