在不使用@extend-CSS、BEM的情况下向元素添加修饰符

我正试图用正确的方法在父类中编写BEM修饰符规则。我一直在使用SASS的

@extend

，但我觉得这样做是不对的。我的意思是：

假设我有一个

.form

类，它如下所示：

<div className="form--inverse">

.form
  background-color: $white
  color: $black
  ...
  &__label
  ...
  &__input
  ...

  &--color-inveresed 
    @extend .form // this is my question. Read on. 
    background-color: $black
    color: $white

并将其嵌套在

.form

类中：

.form
  &__label
  &__input
  &--color-inversed
  ...

我真的应该是

@extend

ing

.form

内部

--颜色反转

。这样做感觉是错误的，因为最终的CSS将被通过修改器扩展的所有元素的重复规则所膨胀

---

但是，如果我不扩展它，

div class='form--color inversed

将完全忽略所有

.form

规则

不要使用@extend向元素添加修饰符，因为在BEM中修饰符不是独立的类。将修改器与其修改的类结合使用：

<div class="form form--color-inversed"></div>

修饰符是添加到块/元素DOM中的额外类名 节点。仅将修改器类添加到它们修改的块/图元，以及 保持原来的等级

---

不要使用@extend向元素添加修饰符，因为在BEM中修饰符不是独立的类。将修改器与其修改的类结合使用：

<div class="form form--color-inversed"></div>

修饰符是添加到块/元素DOM中的额外类名 节点。仅将修改器类添加到它们修改的块/图元，以及 保持原来的等级

---

ahhh。现在我明白了。因此，在我的例子中，第一个

表单

将继承元素样式，然后

表单--color inversed

将拾取

&--color inversed

修改。现在完全有道理了。谢谢

.form

是块修改器，

form\uu label

是元素（在块内）修改器，

form--color inversed

修改块，而

form\uu label--active

修改元素。啊哈。现在我明白了。因此，在我的例子中，第一个

表单

将继承元素样式，然后

表单--color inversed

将拾取

&--color inversed

修改。现在完全有道理了。谢谢

.form

是块修改器，

form\uu label

是元素（在块内）修改器，

form--color inversed

修改块，而

form\uu label--active

修改元素。