在SASS实现中覆盖BEM元素修饰符

Question

这让我困惑了一段时间。

我们使用Sass（SCSS）并实现类似BEM的命名约定 over lib-sass 。

所以，例如，我们有：

.description {
  .title {
    color: red;
  }
}

可以description--special想要执行以下操作：

.description {
  .title {
    color: red;
  }

  &--special {
    .title {
      color: blue;
    }
  }
}

自然会产生特异性问题，因为预期用途是：

<div class="description description--special"></div>

有人可以建议一种优雅的方式吗？

当前＆＃34;最佳＆＃34;建议是这样做：

.description.description--special {
  .title {
    color: blue;
  }
}

当然，至少在 lib-sass 中，这不起作用：

.description {
  .title {
    color: red;
  }

  &.&--special {
    .title {
      color: blue;
    }
  }
}

也不是这样：

.description {
  &root: &;

  .title {
    color: red;
  }

  &.#{&root}--special {
    .title {
      color: blue;
    }
  }
}

Answer 1

使用纯BEM语法

HTML：

<div class="description description--special">
  <h1 class="description__title"></h1>
</div>

SCSS：

.description {
  &__title {
    color: red;
  }

  &--special &__title {
    color: blue;
  }
}

使用替代BEM语法和OOCSS

以下是我使用的替代语法：

• 组件名
• ComponentName.modifierName
• 组件名-descendantName
• 组件名-descendantName.modifierName
• ComponentName.isStateOfComponent
• nonBemPrefix-something（例如＆＃34; ob-myCssObject＆＃34;）

以下代码与您的代码相近。 HTML：

<div class="Description special">
  <h1 class="ob-title"></h1>
</div>

SCSS：

.ob-title {
  font-weight: bold;
}
.Description {
  .ob-title {
    color: red;
  }
  &.special {
    .ob-title {
      color: blue;
    }
  }
}

作为第三个命题，我建议不要用OOCSS污染你的BEM规则。 HTML：

<div class="Description special">
  <h1 class="Description-title ob-title"></h1>
</div>

SCSS：

.ob-title {
  font-weight: bold;
}
.Description {
  &-title {
    color: red;
  }
  &.special &-title {
    color: blue;
  }
}

注意：您应该考虑使用组件Title而不是CSS对象ob-title来保持BEM方式。