使用 BEM 导航栏结构的正确方法

Question

我正在努力思考 CSS 中的 BEM 命名，想知道我是否理解正确。

根据官方文档，一个元素是：

A part of a block that has no standalone meaning and is semantically tied to its block.

鉴于下面的代码片段，.main-nav 的子项的 none 具有任何独立的含义，因此我相信它们都符合元素的条件。

但是，当我最终得到一个像 .main-nav__sub-menu-item-link 这样的 class 名称时，我不禁觉得有些代码味道。感觉我还在嵌套好几层，就在我的元素名称 space.

也许这完全没问题，下面的示例是正确的实现方式，我希望能提供第二个意见。

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

使用 BEM 导航栏结构的正确方法

Correct approach for a navbar structure with BEM

html

css

bem