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

Question

这让我困惑了一段时间。

我们使用 Sass (SCSS) 并在 lib-sass 上实现类似 BEM 的命名约定。

因此，例如，我们有：

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

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

.description {
  .title {
    color: red;
  }

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

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

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

有人可以提出一种足够优雅的方法吗？

当前的“最佳”建议是这样做：

.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
• ComponentName-descendantName
• ComponentName-descendantName.modifierName
• ComponentName.isStateOfComponent
• nonBemPrefix-something（例如“ob-myCssObject”）

以下代码与您的代码接近。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;
  }
}

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