BEMから脱出したHTMLとCSSのコーディング規約・命名規則と例（2021年最新版） - Rollpie

BEM は優れた命名規則ですが、階層が深くなるとアンダースコアの区切りが雑になり、全体的に理解しにくいコードができあがります。 今回はこのページの構造を例に BEM と違う命名規則を考えます。ページのおおまかな構造は下のようになります。 BEM を使うとアンダースコアがたくさん必要になるかもしれない おかしなコード BEM を額面どおりに受けとるとアンダースコアだらけになります。一部の開発者は とするかもしれない。結局はハイフンでつないでいる。開発者は「親・子・孫」の関係を「親・子」と「子・孫」の 2 つの関係に分けて、最初の「親・子」は BEM が定めたアンダースコアのルールを適用しない。 親子の関係をアンダースコア、単語の区切りをハイフンにすると、コピー＆ペーストで苦しむ。 という単語をダブルクリックしてコピーするとき、header と left__logo で分かれる。もちろんこれは