用bem命名導航下拉菜單

這是用bem命名下拉菜單的最佳方式？使用兒童nav-main__sub或修飾符nav-main - sub ??用bem命名導航下拉菜單

<ul class="nav nav-main"> 
<li class="nav__item"> 
    <a href="#" class="nav__link is-active">home</a> 
</li> 
<li class="nav__item nav__item--sub-nav"> 
    <a href="#" class="nav__link">About</a> 
    <ul class="nav nav-main--sub">    
     <li class="nav-main--sub__item"> 
      <a href="#" class="nav-main--sub__link">Company</a> 
     </li> 
    </ul> 
<li class="nav__item"> 
     <a href="#" class="nav__link">Contact</a> 
</li>

來源

2015-08-30 Pablo Enanoski Araya

爲什麼兩個街區'.nav'和'.nav，main'？元素不能是修飾符的子元素：'.nav-main - sub__item'無效。 – Paleo

我對所有的水平網站導航都使用.nav，而.nav-main爲這個導航添加特定的樣式......那麼命名下拉的更好方式應該看起來像 'ul.nav-stacked .nav-main--堆疊 li.nav-stacked__item a.nav-stacked__link' 我對此有點困惑...... –

恕我直言nav-main__sub，因爲它沒有修改器。

<ul class="nav nav--main"> 
    <li class="nav__item nav__item--sub-nav"> 
     <a href="#" class="nav__link">About</a> 
     <ul class="nav nav-main__sub">    
      <li class="nav-main__sub-item"> 
       <a href="#" class="nav-main__sub-link">Company</a> 
      </li> 
     </ul> 
    </li> 
</ul>

或更容易：

<ul class="nav nav--main"> 
    <li class="nav__item nav__item--sub-nav"> 
     <a href="#" class="nav__link">About</a> 
     <ul class="sub">    
      <li class="sub__item"> 
       <a href="#" class="sub__link">Company</a> 
      </li> 
     </ul> 
    </li> 
</ul>

來源

2015-08-30 20:56:02 mwl

用bem命名導航下拉菜單

回答

相關問題