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

Question

我试图围绕在父类中编写BEM修饰符规则的正确方法。我一直在使用SASS的@extend，但觉得这样做是错误的。这就是我的意思：

说我有一个.form类看起来像这样：

<div className="form--inverse">

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

然后我想添加一个名为.color-inversed的修饰符，它看起来像这样：

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

并将其嵌套在.form类中：

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

我应该在@extend内.form --color-inversed div class='form--color-inversed。这样做是错误的，因为最终的CSS会因为通过修饰符扩展的所有元素的重复规则而膨胀。

然而，如果我不扩展它，.form将完全忽略所有render()规则。

Answer 1

不要在@extend的元素中使用add modifier，因为在BEM修饰符中不是独立的类。您可以将修饰符与其修改后的类一起使用：

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

  

修饰符是您添加到块/元素DOM的额外类名   节点。仅将修饰符类添加到它们修改的块/元素中   保留原始课程

getbem.com naming docs