BEM 命名：“element block__element”还是“block__element block__element--modifier”？答案

【问题标题】：BEM naming: "element block__element" or "block__element block__element--modifier"?BEM 命名：“element block__element”还是“block__element block__element--modifier”？
【发布时间】：2020-04-25 02:59:13
【问题描述】：

这个问题参考了这个文档https://en.bem.info/methodology/css/#external-geometry-and-positioning

父类是“header”，按钮是“button header__button”。通常，我会使用（并在教程的其他地方看到）“按钮按钮--标题”。

我的网站使用“dropdown-menu”类的下拉菜单，我也使用“dropdown-menu--nav”，但“--nav”是合适的修饰符吗？根据文档中的逻辑，我应该使用“dropdown-menu navbar__dropdown-menu”。我迷路了，因为我可以看到导航栏和下拉菜单都是它们自己的块，但是当它们相互交互时，我不太确定。如果导航栏是块并且下拉菜单是元素，我应该使用“dropdown-link navbar__dropdown-link”而不是“dropdown-menu__link dropdown-menu__link--nav”作为链接吗？

我可以看到“元素块__元素”方法效果更好，因为该元素的块特定样式将接近块样式，而不是元素样式作为修饰符。

【问题讨论】：

标签： css bem

【解决方案1】：

我如何将 BEM 用于按钮示例和下拉菜单的示例：https://codepen.io/SROwl/pen/eYmVzBE

解释：

我会将 dropdown-menu--nav 写为 dropdown-menu__nav，因为它是下拉菜单的一个组件。此外，我倾向于对下面的导航示例中看到的内部组件进行 rebase。

按钮示例用于显示用于创建所需按钮外观的多个类。但是，如果 .button 类没有任何与 .header__button 相同的样式，则没有必要这样做。您只需使用 .header__button。

如果我想更改按钮颜色，我会使用修饰符，例如：.header__button--green。

我偏离了 BEM 文档，他们希望您使用以下内容：。我使用 SCSS 扩展来包含 header__button 到 header__button--green 的属性，因此标记最终是：而不是包括这两个类。 这是个人喜好，有些人不喜欢扩展，因为他们发现难以管理或不喜欢它编译 css 的方式。

BEM
<!-- How BEM states it should be done -->
<div class="button">Shop Now</div>
<div class="button header__button">Shop Now</div>
<div class="button header__button header__button--green">Shop Now</div>

BEM EXTEND
<!-- How I prefer to do it -->
<div class="button2">Shop Now</div>
<div class="header__button2">Shop Now</div>
<div class="header__button2--green">Shop Now</div>

BEM NAV
<div class="dropdown-menu">
  <div class="dropdown-menu__header">
    Menu
  </div>
  <ul class="dropdown-menu__nav">
    <li class="nav__link">Link 1</li>
    <li class="nav__link--active">Link 2</li>
    <li class="nav__link">Link 3</li>
  </ul>
</div>

    body {
  font-family: sans-serif;
}
// BEM WAY
.button {
  background: #000;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  max-width: 200px;
  padding: 5px 15px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.header__button {
  font-size: 32px;
  color: #ccc;

  &--green {
    background-color: green;
  }
}

// BEM-ish way
.button2 {
  background: #000;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  max-width: 200px;
  padding: 5px 15px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.header__button2 {
  @extend .button2;
  font-size: 32px;
  color: #ccc;

  &--green {
    @extend .header__button2;
    background-color: green;
  }
}

// BEM-ish menu
.dropdown-menu {
  background: gray;
  width: 300px;
  padding: 15px;

  &__header {
    background-color: #ccc;
    padding: 5px;   
  }

  &__nav {
    background: darken(#ccc, 20%);
    padding: 10px;
    list-style-type: none;

    .nav {
      &__link {
        text-transform: uppercase;
        color: purple;
        padding: 5px;
        &--active {
          @extend .nav__link;
          color: pink;
          background: gray;
        }
      }
    }
  }
}

【讨论】：