在 CSS 中适当使用 BEM

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 {}
}