scss BEM 修改器的困难

Difficulties with scss BEM modifiers

我很难理解如何使用 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,这就是发生的情况,除了文本没有像我期望的那样居中,因为我元素样式有 text-align: center;

我误会了什么?看了一些关于 scss with BEM 的教程,还是没看懂。

当你 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 提倡的是使用系统的命名方式 classes 来设置文档的样式,但是手动编写 BEM 是一场噩梦。 Sass 使用 & 引用的父选择器使编写 BEM 变得容易,但您仍然必须记住,在使用 & 时您只是生成 class 名称而不是实际嵌套在 Sass.

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

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

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

/* Block component */

.btn {}

/* Element that depends upon the block */

.btn__price {}

/* Modifier that changes the style of the block */

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

看看BEM 101来自CSS技巧

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

.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>

实际上,您比@dippas 更准确地使用 BEM。我会像这样修改你的代码:

<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 */
}

作为一般规则,无论何时您想要使用修饰符,您都需要记住使用修饰符额外添加元素 class。因此,对于您的元素,您的基数 class 为 '.some-block__some-element'。您需要将此添加到所有需要此 class 的元素。然后使用相同的 class 并将其再次添加到带有修饰符的元素中。在您的示例中,由于您仅将基数 class 添加到三个元素的第一次出现处,因此 css 自然只会为背景设置样式:蓝色和文本对齐:居中。

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