最初にBEMを使用します。私は何が間違っていますか？

Question

初めてBEMを使用しようとしていますが、私はそれをあまり理解していないと思います。 すべての要素にクラスを割り当てる必要がありますか？liとaを含める必要がありますか？私はこのコードの平和にあなたのアドバイスを受けることは非常に感謝される：あなたの助けのための

<header> 
<div class="container container-1170"> 
    <div class="row"> 
    <div class="col-md-12"> 

     <nav class="navbar navbar-default header-menu"> 

     <div class="navbar-header header-menu__toggle"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <img src="./img/sprite.png" class="header-menu__logo ico_header-logo" alt=""> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right header-menu__list"> 
      <li class="header-menu__list__item item"><a href="#" class="item__href item__href--active"></a></li> 
      <li class="dropdown header-menu__list__item item"> 
       <a href="#" class="dropdown-toggle item__href item__href--dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a> 
       <ul class="dropdown-menu drop-list"> 
       <li class="drop-list__item"><a href="#"></a> 
        <ul class="in-drop-item"> 
        <li class="in-drop-item__item"><a href="#" class="in-drop-item__item__href"></a></li> 
        <li class="in-drop-item__item"><a href="#" class="in-drop-item__item__href"></a></li> 
        <li class="in-drop-item__item"><a href="#" class="in-drop-item__item__href"></a></li> 
        <li class="in-drop-item__item"><a href="#" class="in-drop-item__item__href"></a></li> 
        <li class="in-drop-item__item"><a href="#" class="in-drop-item__item__href"></a></li> 
        <li class="in-drop-item__item"><a href="#" class="in-drop-item__item__href"></a></li> 
        </ul> 
       </li> 
       <li class="drop-list__item"><a href="#"></a></li> 
       <li class="drop-list__item"><a href="#"></a></li> 
       <li class="drop-list__item"><a href="#"></a></li> 
       </ul> 
      </li> 
      <li class="header-menu__list__item item"><a href="#" class="item__href"></a></li> 
      <li class="header-menu__list__item item"><a href="#" class="item__href"></a></li> 
      <li class="header-menu__list__item item"><a href="#" class="item__href"></a></li> 
      <li class="header-menu__list__item item"><a href="#" class="item__href"></a></li> 
      <li class="header-menu__list__item item"><a href="#" class="item__href"></a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </nav> 
    </div> 
    </div> 
</div> 

ありがとう！

Answer 1

bemの重要な概念は、コードの再利用性です。あなたがそれを再利用できるなら、それにクラスを与えるべきです。ネストされたセレクタを避け、モジュール化しやすくします。これが必要でない場合は、そうしないことを強くお勧めします。しかし、この要素が決してこの構造から離れないと感じる場合は、カスケードスタイルのルールをいくつか作成できますが、この気持ちは通常は気になりません。

また、私はいくつかの間違いを発見しました。「要素の要素」を避けるべきです。ここにその説明があります： https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2