html - scss BEM 修改器的困难

Question

我很难理解如何使用 BEM 命名约定正确编写 scss。

这里我有一些 HTML:

<div class="SomeBlock">
   <div class="SomeBlock__someElement">text</div>
</div>

<div class="SomeBlock">
   <div class="SomeBlock__someElement--greenBG">text</div>
</div>

<div class="SomeBlock">
   <div class="SomeBlock__someElement--orangeBG">text</div>
</div>

以及以下 scss:

.SomeBlock {
   margin: 10px 0 0 0;
   color: white;
   width: 100px;
   height: 50px;
   background: red;

   &__someElement {
      background: blue;
      text-align: center;

      &--greenBG {
         background: green;
      }

      &--orangeBG {
         background: orange;
      }
   }
}

我希望发生的是有 3 个不同的 block ，它们都相同但具有不同颜色的 backgrounds，这就是发生的情况，除了文本没有像我期望的那样居中，因为我的元素样式有 text-align: center;

我误会了什么？我已经阅读了一些关于 scss 和 BEM 的教程，但我仍然不明白。

Answer 1

小心reference parent selectors using & in Sass因为它不做你认为它做的事。

在 SCSS 的正常嵌套中，这是:

a {
  b {
    /* styling */
  }
}

生成 a b {/* 样式 */}。

但是，当您使用 & 引用父选择器时，这:

a {
  &__b {
    /* styling */
  }
}

变成:a__b {/* styling */}//注意这是一个类。

BEM 提倡的是使用系统的命名类的方式来为您的文档设置样式，但是手动编写 BEM 是一场噩梦。使用 & 引用的 Sass 父选择器使编写 BEM 变得容易，但您仍然必须记住，在 Sass 中使用 & 时，您只是生成类名而不是实际嵌套.

这一切意味着，在您的情况下，您需要为要应用的各种 CSS 规则添加以下每个类:

<div class="SomeBlock SomeBlock__someElement SomeBlock__someElement--greenBG">text</div>