scss BEM修改器的困难答案

【问题标题】：Difficulties with scss BEM modifiersscss BEM修改器的困难
【发布时间】：2016-09-10 07:56:30
【问题描述】：

我很难理解如何使用 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 个不同的块，全部相同但颜色不同 backgrounds，除了文本没有像我预期的那样居中之外，这就是发生的情况，因为我的元素样式有 @ 987654324@

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

【问题讨论】：

标签： html css sass bem

【解决方案1】：

reference parent selectors using & in Sass 时要小心，因为它不会像您认为的那样做。

在 SCSS 中的正常嵌套中，这个：

a {
  b {
    /* styling */
  }
}

生成a b { /* styling */ }。

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

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

变成：a__b { /* styling */ } // note that this is one class。

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

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

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

【讨论】：

【解决方案2】：

实际上，您在准确使用 BEM 方面比 @dippas 更接近一些。我会像这样修改你的代码：

<div class="some-block">
   <div class="some-block__some-element">text</div>
</div>

<div class="some-block">
   <div class="some-block__some-element some-block__some-element--green-bg">text</div>
</div>

<div class="some-block">
   <div class="some-block__some-element--orange-bg">text</div>
</div>

scss

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

   &__some-element {
      background: blue;
      text-align: center;

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

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

这里是简化的输出 css 以透视事物。

.some-block {
   /* block styles */
}
.some-block__some-element {
   /* element styles */
}
.some-block__some-element--green-bg {
  /* element mod styles */
}

作为一般规则，每当您想使用修饰符时，您都需要记住使用修饰符添加元素类。因此，对于您的元素，您有一个“.some-block__some-element”的基类。您需要将此添加到需要此类的所有元素中。然后使用同一个类并将其再次添加到带有修饰符的元素中。在您的示例中，由于您仅将该基类添加到三个元素的第一次出现，因此 css 自然只会使用背景：蓝色和文本对齐：中心设置该基类的样式。

此外，虽然从技术上讲，您可以不使用大写的类名，但我建议您使用小写的类名并用一个连字符分隔多词名称，而不是使用大写的驼峰式大小写。

【讨论】：

感谢您的精彩解释。如果我以后遇到困难，我会参考这个。

【解决方案3】：

这是根据 BEM 方法命名类的最佳方式：

/* 块组件 */

.btn {}

/* 依赖于块的元素 */

.btn__price {}

/* 改变块样式的修饰符 */

.btn--orange {} .btn--big {}

看看来自 CSS Tricks 的 BEM 101

所以我会使用单个类来简化。

.someblock {
  margin: 10px 0 0 0;
  color: white;
  width: 100px;
  height: 50px;
  background: red;
}
.some__element {
  background: blue;
  text-align: center;
}
.green--bg {
  background: green;
}
.orange--bg {
  background: orange;
}

<div class="someblock">
  <div class="someblock some__element">text</div>
</div>

<div class="someblock">
  <div class="someblock some__element green--bg">text</div>
</div>

<div class="someblock">
  <div class="someblock some__element orange--bg">text</div>
</div>

【讨论】：