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

Question

我正在努力思考在父 classes 中编写 BEM 修饰符规则的正确方法。我一直在使用 SASS 的 @extend 但感觉这样做是错误的。这就是我的意思：

假设我有一个 .form class 看起来像这样：

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

中

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

我真的应该 @extending .form 在 --color-inversed 里面吗？这样做感觉不对，因为最终的 CSS 会因所有通过其修饰符扩展的元素的重复规则而变得臃肿。

然而，如果我不扩展它，div class='form--color-inversed 将完全忽略所有 .form 规则。

Answer 1

不要使用@extend 向元素添加修饰符，因为在 BEM 中修饰符不是独立的 classes。您将修饰符与它的修饰符一起使用 class:

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

Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class

getbem.com naming docs

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

adding modifier to element without using @extend - CSS, BEM

css

sass

bem