BEM 命名："element blockelement" 还是 "blockelement block__element--modifier"？

Question

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

父项 class 是 "header"，按钮是 "button header__button"。通常，我会使用（并在教程的其他地方查看）"button button--header".

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

我认为 "element block__element" 方法效果更好，因为该元素的块特定样式将接近块样式，而不是将元素样式作为修饰符。

Answer 1

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

解释：

我会把 dropdown-menu--nav 写成 dropdown-menu__nav 因为它是下拉菜单的一个组成部分。此外，我倾向于重新设置在下面的导航示例中看到的内部组件。

按钮示例用于显示多个 classes 用于创建您想要的按钮外观。但是，如果 .button class 没有任何与 .header__button 相同的样式，那么这就没有必要了。您只需使用 .header__button.

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

我稍微偏离了 BEM 文档，他们希望您使用类似这样的东西：< div class="header__button header__button--green">。我使用 SCSS extends 来包含 header__button 到 header__button--green 的属性，所以标记最终是：< div class="header__button--green"> 而不是包括两个 classes。 这是个人喜好，有些人不喜欢 extends 因为他们发现它难以管理或不喜欢它编译 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;
        }
      }
    }
  }
}

BEM 命名："element block__element" 还是 "block__element block__element--modifier"？

BEM naming: "element block__element" or "block__element block__element--modifier"?

css

bem

BEM 命名："element blockelement" 还是 "blockelement block__element--modifier"？

BEM naming: "element blockelement" or "blockelement block__element--modifier"?