如何在没有重复"Block"甚至不支持 SASS 的情况下编写 BEM CSS？

Question

我有元素：

<span class="bage--red">4</span>

我需要在添加前缀.bage这个元素的背景颜色：

--red
--green

怎么到这个属性？

现在浏览器将其作为一个类bage--red。 而不是两个

Answer 1

您可以将其分为 2 个类。

<span class="bage --red">4</span>

在 CSS 中：

.bage {
font-size: 100px;
}
.bage.--red { // instead of .bage--red
color: red;
}
.bage.--green {
color: green;
}

---

我在某处读到有人称之为"自定义 BEM"。我一直在使用它，编写更短的CSS代码，即使没有SASS/SCSS。就像这个例子(BEM 中的元素(一样，而不是：

<div class="menu">
...
<span class="menu__item menu__item_visible menu__item_type_radio"> ... </span>
</div>
.menu__item_visible {}
.menu__item_type_radio { color: blue; }

我会写：

<div class="menu">
...
<span class="__item __item_visible __item_type_radio"> ... </span>
</div>
.menu .__item_visible {}
.menu .__item_type_radio { color: blue; }

或(Modifider BEM(，而不是

<button class="btn btn--secondary"></button>
.btn {
display: inline-block;
color: blue;
}
.btn--secondary {
color: green;
}

是

<button class="btn --secondary"></button>
.btn {
display: inline-block;
color: blue;
}
.btn.--secondary {
color: green;
}