Question

我是使用CSS的老手，但是最近决定尝试一下并开始使用BEM。在大多数情况下，我了解使用这种扁平系统的价值，避免使用过于具体的选择器等。

我的问题是，以下方法是否正确？从技术上讲，它可以工作，但似乎也很脆弱：

.badge {
  /* additional declarations */
  background: rgba(0, 0, 0, 0.2);
}
.badge--error {
  background: red;
}
.badge--success {
  background: green;
}

由于CSS的级联性质，因此效果很好。因此，默认背景成功被修饰符覆盖。但是，如果我将修饰符放在初始声明之前，则修饰符会被忽略（由于相同的特异性）。

以这种方式编写BEM是否有任何问题？如果要用修饰符覆盖某个默认值，例如在块内声明一个background这样的默认值，是否被认为是不好的做法？在这种情况下，默认的background是否应该放在.badge--default修饰符中？还是我是用一种真正的BEM方式编写的，而BEM实际上是依靠CSS的级联才能保持扁平？

Answer 1

您可以使用CSS变量

.badge {
  background: var(--background);
}

.badge--error {
  --background: var(--error);
}

.badge--success {
  --background: var(--success);
}


:root {
  --background: yellow;
  --error: red;
  --success: green;
}

<div class="badge">
  a badge
</div>

<div class="badge badge--success">
  a badge success
</div>

<div class="badge badge--error">
  a badge error
</div>

<div class="badge" style="--background: purple">
  a badge random
</div>

我不明白为什么如果在初始元素中未设置修饰符，背景修饰符就不能仅修饰背景。

对于BEM，我建议使用SASS之类的CSS预处理程序，因为它可以很容易地嵌套元素，在初始声明之前声明一些修饰符的更改很少。由于嵌套，您的CSS变得更有条理。导入不同的组件也更加容易，因此每个组件都可以位于自己的文件中。

使用SASS，您可以：

.badge {
  &--error {}
  &--success {}
}

在CSS中适当使用BEM

1 个答案: