ABEM adding modifiers directly to an element?

Question

I'm beginning to learn more about CSS formatting and now I've picked up ABEM to use along with SCSS to develop a WordPress site.

Is it then valid to add a modifier directly to let's say an h1 block? Like this:

HTML

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

CSS

.-green {
 color: green;
}

Or do I need to add a block or an element before to modify it instead? Like this:

HTML

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

CSS

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

Answer 1

ABEM is a BEM variant and a lonely modifier wouldn't be BEM-compliant. Your second option is the right one: you "need to add a block or an element before to modify it instead".

If you want to create a standalone helper for a simple purpose, then it is not a modifier but a block:

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

With the CSS:

.green {
  color: green;
}

This helper block can of course be mixed with other blocks or elements. The following code is valid:

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