带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之后它和短变体一样。