帶BEM的導航欄結構的正確方法

Question

我試圖圍繞着BEM在CSS中命名，並且想知道我是否正確理解它。

每正式文檔，一個元素是：

不具有獨立的含義和在語義 依賴於它的塊的塊的一部分。

由於下面的代碼片段，.main-nav的子項目都沒有任何獨立的含義，所以我相信它們都可以作爲一個元素。

但是，當我最終得到類名.main-nav__sub-menu-item-link時，我不禁感到有一些代碼味道。這感覺就像我仍然在我的元素名稱空間內一樣深層嵌套幾層。

也許這是完全可以的，下面的例子是正確的實現，我只是欣賞第二種意見。

<nav class="main-nav"> 
 
    <div class="main-nav__logo"> 
 
    <a class="main-nav__logo-link">Company Name</a> 
 
    </div> 
 
    <ul class="main-nav__menu"> 
 
    <li class="main-nav__menu-item"> 
 
     <a class="main-nav__menu-item-link">Products</a> 
 
     <ul class="main-nav__sub-menu"> 
 
     <li class="main-nav__sub-menu-item"> 
 
      <a class="main-nav__sub-menu-item-link">Foo</a> 
 
     </li> 
 
     <li class="main-nav__sub-menu-item"> 
 
      <a class="main-nav__sub-menu-item-link">Bar</a> 
 
     </li> 
 
     <li class="main-nav__sub-menu-item"> 
 
      <a class="main-nav__sub-menu-item-link">Baz</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="main-nav__menu-item"> 
 
     <a class="main-nav__menu-item-link">Services</a> 
 
    </li> 
 
    <li class="main-nav__menu-item"> 
 
     <a class="main-nav__menu-item-link">About Us</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

這真是好確實如此。

在您的標記中解決了CSS中無作用域問題。選擇器的特異性不會增加。所以保持原樣。

不要害怕長名稱，在gzip之後它和短變體一樣。