html - BEM と SMACCS を使用してネストされた要素に名前を付ける方法

Question

スタイルシートに BEM と SMACCS を使い始めたばかりですが、DOM で深くネストされた要素に名前を付ける限り、いくつかの問題に遭遇しました。たとえば、 という div があるとし.main-containerます。の最初のレベル内にネストされているのmain-containerは、慣例により という名前の追加の div.main-container__articleです。

<div class="main-container>
  <div class="main-container__article></div>
</div>

これは物事が混乱するところです。その記事の div 内に、入れ子になった span タグを持つ段落が続くヘッダーがあるとします。クラスの先頭にそのまま追加し続けmain-container__articleますか?

<div class="main-container>
  <div class="main-container__article>
    <h1 class="main-container__article__header">Heading</h1>
    <p class="main-container__article__copy">
      <span class="main-container__article__copy__intro-text>Example text.</span>
    </p>
  </div>
</div>

親/子要素の名前付けに関しては、うさぎの穴はどこまで行くのでしょうか? 2 番目のレベルの要素でリセットして、そこから進むポイントはありますか?

<div class="main-container>
  <div class="article>
    <h1 class="article__header">Heading</h1>
    <p class="article__text">
      <span class="article__text__intro-text>This is example text.</span> for a paragraph 
    </p>
   </div>
</div>