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

【问题标题】：adding modifier to element without using @extend - CSS, BEM在不使用 @extend 的情况下向元素添加修饰符 - CSS、BEM
【发布时间】：2017-11-28 21:05:57
【问题描述】：

我正试图围绕在父类中编写 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
  ...

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

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

【问题讨论】：

标签： css sass bem

【解决方案1】：

不要使用@extend 向元素添加修饰符，因为在 BEM 中修饰符不是独立的类。您将修饰符与修改后的类一起使用：

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

Modifier 是您添加到块/元素 DOM 的额外类名节点。仅将修饰符类添加到它们修改的块/元素，以及保留原来的类

【讨论】：

啊。现在我懂了。因此，在我的情况下，第一个 form 将继承元素样式，然后 form--color-inversed 将选择 &--color-inversed 修改。现在完全有道理。谢谢！
.form 是方块修饰符，.form__label 是元素（方块内部）修饰符，.form--color-inversed 修饰方块，.form__label--active 修饰元素。