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个不同的块，都是相同但有不同颜色的backgrounds，这就是发生的情况，除了文本没有居中，因为我希望它是因为我的元素样式有text-align: center;

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

Answer 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是一场噩梦。使用&引用父级选择器使得写出BEM变得容易，但是您仍然需要记住，在Sass中使用&时，您只是生成类名而不是实际嵌套。

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

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

Answer 2

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

/ *阻止组件* /

.btn {}

/ *取决于块* /
的元素
.btn__price {}

/ *更改块* /
样式的修改器
.btn--orange {}   .btn--big {}

从CSS Tricks

查看BEM 101

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

实际上，与@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 */
}

作为一般规则，每当您想要使用修饰符时，您需要记住使用修饰符额外添加元素类。因此，对于您的元素，您有一个基础类'.some-block__some-element'。您需要将此添加到需要此类的所有元素。然后使用相同的类并使用修饰符将其再次添加到元素中。在您的示例中，由于您只将该基类添加到三个元素的第一个匹配项中，因此css自然只会将那个基类设置为background：blue和text-align：center。

此外，尽管从技术上讲你可以使用大写的类名，但我建议使用小写的类名，并用单个连字符分隔多个单词名，而不是使用上部的驼峰套。

使用scss BEM修饰符的困难

3 个答案: