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也是如此。类似于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; }

或 （修改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;
}

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

1 个答案: