BEM：アイテムとスタイリングをリストしますか？

Question

私はBEMに新しいですし、サンプルテンプレートでの作業：

HTML

<header class="header"> 
    <div class="header__branding"> 
    <h1>Site branding</h1> 
    </div> 
    <div class="header__menu"> 
    <nav class="main-menu"> 
     <ul class="main-menu list"> 
     <li class="list__item"><a href="" class="list__item-link">link</a></li> 
     <li class="list__item"><a href="" class="list__item-link--active">link</a></li> 
     <li class="list__item"><a href="" class="list__item-link">link</a></li> 
     </ul> 
    </nav> 
    </div> 
</header> 

<footer class="footer"> 
    <div class="footer__links"> 
    <ul class="???? list"> 
     <li class="list__item"><a href="" class="list__item-link">link</a></li> 
     <li class="list__item"><a href="" class="list__item-link">link</a></li> 
     <li class="list__item"><a href="" class="list__item-link">link</a></li> 
    </ul> 
    </div> 
</footer> 

CSS

.main-menu .list{ 
    // styles here 
} 

.list__item{ 
    // styles here 
} 

.list__item-link{ 
    // styles here 
} 

.list__item-link--active{ 
    // styles here 
} 

だから私の質問は、名前に最善の方法は何か、ですリストとCSSを整理するにはどうすればいいですか？私はフッターにこだわった、私は追加しました????誰かがフッタリンクのより良い名前を考えるのを助けることができたら？

私はBEMの周りに頭を包むのが難しいと思っていますが、一度に複数の要素を入れ子にしてはいけませんか？

Answer 1

BEMは、別の場所でサイトに何度も配置することができる再利用可能なコンポーネントと考えてください。

この場合、 'list'にのみクラスは必要ありません。ヘッダーとフッターの両方。

変更が必要な場合は、 'list list - wide'のようにsomethigを使用できます。そして、この第2のクラスは要素の幅だけを変更します。

もう1つ：list__item-linkが間違っています。親は 'list__item'なので、これは 'list__item__link'という名前にする必要がありますが、それはちょうど 'アンカー'または 'リンク'と名前を付けて、<a>要素のすべてのサイトでそれらを再利用できるようになります。