如何编写没有“块”重复甚至没有SASS支持的BEMCSS？

我有元素：

4


我只需要添加前缀就可以更改此元素.bage的背景色：

--red
--green


如何使用此属性？

现在，浏览器将此类归为bage--red。不是两个

您可以将其分为2类。

4


在CSS中：

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


我在某处读到有人称其为“自定义BEM”。我一直使用它，编写较短的CSS代码，即使没有SASS / SCSS也是如此。类似于this example中的 （BEM中的元素） ，而不是：

我会写：

或 （修改BEM） ，而不是


.btn {
display: inline-block;
color: blue;
}
.btn--secondary {
color: green;
}


是


.btn {
display: inline-block;
color: blue;
}
.btn.--secondary {
color: green;
}