БЭМ: добавление модификатора к уже существующему модификатору

Question

Меня смутил простой сценарий, когда я работал с БЭМ.В примере есть базовая кнопка:

.button {
    // styles for button
}

и ее модификатор с более конкретными стилями:

.button.button_run {
    // additional styles for this type of button
    // i.e. custom width and height
}

В один момент я понимаю, что мне нужен модификатор для button_run, назовем егокак button_run_pressed:

.button_run_pressed {
    // more styles, i.e. darker background color
}

Проблема в том, что неправильно называть последний элемент, как я делал выше button_run_pressed в соответствии с соглашениями БЭМ.Но мне нужно добавить «нажатые» стили только к кнопке «Выполнить», а не для всех кнопок, написав класс, такой как button_pressed и модификатор смешивания button button_run button_pressed.

Как я должен реорганизовать свой код в соответствии с соглашениями БЭМ

Answer 1

Согласно http://getbem.com/naming/, классы модификаторов начинаются с двух дефисов (-).Таким образом, модификатор для .button должен выглядеть так:

.button--modifier { /* ... */ }

В вашем случае я бы предложил выбрать следующие имена:

.button {}
.button--run {}
.button--run-pressed {}

Обратите внимание, что я также отделил классы-модификаторы откласс блока, который больше соответствует правилам БЭМ.Вы хотите избежать создания классов, которые зависят от других в работе.

Так как вы добавили less в качестве тега к сообщению, вот как это может выглядеть в less или scss:

.button {
    // button styles

    &--run {
        // modified styles
    }

    &--run-pressed {
        // more modifiers
    }
}

Это приведет к именам классов, которые я написал выше

Answer 2

Во-первых, имя должно быть .block--modifier или .button--run

Если вы хотите, чтобы оно работало только с обоими модификаторами run и press, вы должны назвать его как

.button.button--run.button--pressed

Надеюсь, эта помощь