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

Question

我有元素：

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

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

--red
--green

如何做到这一点属性？

现在浏览器将其视为一个 class 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;
}

我在某处读到有人称其为 "custom BEM"。我一直在使用它，编写更短的 CSS 代码，即使没有 SASS/SCSS。就像来自 this example （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;
}

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

How to write BEM CSS without "Block" duplicate, nor even SASS support?

css

sass

bem