ABEM 直接向元素添加修饰符？

Question

我开始了解有关 CSS 格式化的更多信息，现在我已经选择了 ABEM 与 SCSS 一起使用来开发 WordPress 网站。

那么直接添加修饰符是否有效，比如说 h1 块？像这样：

HTML

<h1 class="-green">To make the text green.</h1>

CSS

.-green {
 color: green;
}

或者我需要先添加块或元素才能修改它吗？像这样：

HTML

<h1 class="a-heading_text -green">To make the text green.</h1>

CSS

.a-heading_text.-green {
 color: green;
}

Answer 1

ABEM 是 BEM 的变体，单独的修饰符不符合 BEM。你的第二个选项是正确的：你 "need to add a block or an element before to modify it instead".

如果你想为一个简单的目的创建一个独立的助手，那么它不是一个修饰符而是一个块：

<h1 class="green">To make the text green.</h1>

与CSS:

.green {
  color: green;
}

这个辅助块当然可以 mixed 与其他块或元素一起使用。以下代码有效：

<h1 class="a-heading_text green">To make the heading text green.</h1>

ABEM adding modifiers directly to an element?