首先使用BEM。我做錯了什麼？

我嘗試在第一次使用BEM，我認爲我不太明白它。 是否需要爲所有元素分配類，包括li和a？我會很感激在這個和平的代碼收到您的建議：首先使用BEM。我做錯了什麼？

<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>

感謝您的幫助！

來源

2016-09-07 Medvedev A.

bem的關鍵概念是代碼的可重用性。如果你可以重複使用它，你應該給它上課。它有助於避免嵌套選擇器並使事物更加模塊化。我強烈建議不要這樣做，如果這不是必要的，但如果你覺得這個元素永遠不會與這個結構分開，你可以爲它們制定一些級聯規則，但要小心，這種感覺通常很棘手。

此外，我發現了一些其他的錯誤 - 你應該避免「元素元素」。這裏是解釋： https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

來源

2016-09-07 15:10:35

首先使用BEM。我做錯了什麼？

回答

相關問題