BEM：ネストされたブロック、最適なアプローチは何ですか？

Question

次のマークアップでは、BEMの最適なアプローチは何ですか？

これ？：

<footer role="footer"> 
    <footer class="footer__inner"> 
    <div class="footer__left">© Some text</div> 
    <div class="footer__right">Some text</div> 
    </footer> 
</footer> 

ORこれは

<footer role="footer"> 
    <footer class="footer__inner"> 
    <div class="footer__inner__footer__left">© Some text</div> 
    <div class="footer__inner__footer__right">Some text</div> 
    </footer> 
</footer> 

またはそれらのどれを？：は右であり、あなたはより良い方法を知っていますか？

ありがとうございました

Answer 1

クリーンな再利用可能なブロックが必要です。どの部分を再利用したいか自問してください。

ブロックの複数レベルのネスティングが悩まされています。それは正当な理由のためです。再利用可能な場合は、ルート参照として1つのブロックのみが必要です。その1つのブロックの下のすべては、bemの統語的な観点から、そのブロックの要素です。サブブロックではなく、サブ要素であり、要素のみです。

したがって、BEMはHTML構造を気にしません。これは、ブロックや要素がどのような目的を持っているのかという問題です。

あなたのネストされたフッターの目的はあなたの例から本当に分かりませんが、BEM命名の一環として外側のフッター要素のロール属性を検討するかのように見えます。しかし、そうではありません。懸念の分離の考えを念頭に置いて。 role = "footer"はHTMLセマンティックです。ある日、そのHTML属性を変更してから、BEMセマンティックが煙の中に浮かび上がる可能性があるので、BEM命名のリファレンスとしては使用しないでください。

ここで私は何をしますか？

、あなたは（単なる例として）このようなあなたのクラスに名前を付けたい場合がありますのは、あなたの外側のフッターは、再利用可能な要素になりたいとしましょう：

<footer class="footer" role="footer"> 
    <footer class="footer__textbox"> 
     <div class="footer__text--left"> <!-- left as modifier --> 
     <div class="footer__text--right"> <!-- right as modifier --> 
    </footer> 
</footer> 

今すぐあなたのフッターを取り、それを使用することができますページの適切なセクションとコードを読んでいる誰でも、このCSS構造の目的についてのアイデアを得ることができます。

Answer 2

最初の変種は私にとってうまく見えます。

DOM構造をクラス名に反映しないでください。 https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

マークアップのロングハイクもいいです。