Html scss边界元修改器的难点

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

这里我有一些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>

我希望出现的情况是有3个不同的块，所有块都相同，但具有不同颜色的

背景

，这就是发生的情况，除非文本没有像我期望的那样居中，因为我的元素样式有

文本对齐：居中

我误解了什么？我已经阅读了一些关于边界元法的SCS教程，但我仍然不理解。
当你使用它时要小心，因为它没有做你认为它会做的事情

在SCS中的正常嵌套中，这：

a {
  b {
    /* styling */
  }
}

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

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

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

变成：
a_uub{/*样式*/}//注意，这是一个类

BEM提倡的是使用一种系统化的命名类的方法来设计文档的样式，但是手工编写BEM是一场噩梦。使用
&
引用Sass父选择器可以轻松写出BEM，但您仍然必须记住，在Sass中使用
&
时，您只生成类名，而不是实际嵌套

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

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

文本
使用时要小心，因为它不会做你认为它会做的事情

在SCS中的正常嵌套中，这：

a {
  b {
    /* styling */
  }
}

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

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

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

变成：
a_uub{/*样式*/}//注意，这是一个类

BEM提倡的是使用一种系统化的命名类的方法来设计文档的样式，但是手工编写BEM是一场噩梦。使用
&
引用Sass父选择器可以轻松写出BEM，但您仍然必须记住，在Sass中使用
&
时，您只生成类名，而不是实际嵌套

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

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

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

/*块组件*/

.btn{}

/*依赖于块的元素*/

.btn\uu price{}

/*更改块样式的修改器*/

.btn--橙色{}
.btn--big{}

看一看CSS技巧

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


.someblock{
利润率：10px0；
颜色：白色；
宽度：100px；
高度：50px；
背景：红色；
}
.一些元素{
背景：蓝色；
文本对齐：居中；
}
.格林--bg{
背景：绿色；
}
.橙色--bg{
背景：橙色；
}

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

/*块组件*/

.btn{}

/*依赖于块的元素*/

.btn\uu price{}

/*更改块样式的修改器*/

.btn--橙色{}
.btn--big{}

看一看CSS技巧

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


.someblock{
利润率：10px0；
颜色：白色；
宽度：100px；
高度：50px；
背景：红色；
}
.一些元素{
背景：蓝色；
文本对齐：居中；
}
.格林--bg{
背景：绿色；
}
.橙色--bg{
背景：橙色；
}

文本
文本
文本
事实上，在准确使用边界元法方面，您比@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>

这里是简化输出的css，用于透视事物

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

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

此外，虽然从技术上讲，您可以不用使用大写类名，但我建议您使用小写类名，并用一个连字符分隔多个单词名，而不是使用大写字母大小写
 实际上，你比@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>

这里是简化输出的css，用于透视事物

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

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

此外，虽然从技术上讲，您可以不用使用大写类名，但我建议您使用小写类名，并用一个连字符分隔多个单词名，而不是使用大写字母大小写
 谢谢你的解释。如果我将来遇到困难，我会再参考这篇文章。谢谢你的解释。如果我在未来陷入困境，我会再次提到这一点。