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 - это вариант БЭМ, а одинокий модификатор не будет БЭМ-совместимым.Ваш второй вариант является правильным: вам "необходимо добавить блок или элемент, прежде чем изменять его вместо этого" .

Если вы хотите создать автономный помощник для простой цели,тогда это не модификатор, а блок:

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

С помощью CSS:

.green {
  color: green;
}

Этот вспомогательный блок, конечно, может быть смешан с другими блоками илиэлементы.Действителен следующий код:

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