Как лучше закодить такой компонент кнопки по БЭМ?

Question

[Максим]

Привет! На проекте есть определённый набор кнопок (поскринил и собрал их в одной пикче):


Красные отвечают за какие-то глобальные действия (типа отправить форму),
а синие за какие-то локальные действия (типа перейти к следующему шагу заполнения ряда форм)

Как будет правильно сформировать компонент?
Будет ли это один компонент кнопки с модификаторами типа на есть/нет фон, есть/нет рамка и на есть/нет цвет?
Получается на одну кнопку надо будет кучу модификаторов городить в разметку. Это же не хорошо наверняка.
Как лучше сделать?
Спасибо!

Comments

[Сергей delphinpro]

.btn {} // общие стили
.btn_primary {} // один цвет
.btn_secondary {} // второй цвет
.btn_outline {} // без фона
.btn_disabled {} // если я правильно понял про серую кнопку

[Максим]

Сергей delphinpro, Спасибо большое :) Очень понятный пример)

Answer 1

[Олег]

Я бы сделал так

Comments

[Максим]

Олег Спасибо большое за предложенное решение, думаю примерно так или прямо так и поступлю :)

Answer 2

[Realetive]

Цвет не может отвечать за какие-то действия, он может их лишь характеризовать (например, состояния).
Пример вёрстки советую посмотреть на официальном сайте методологии (ребята потратили уйму времени на поиск оптимального сочетания вложенности к функциональности идекларативности): https://ru.bem.info/platform/libs/bem-components/6...
P. S. Вообще при любом вопросе, связанном с БЭМ, советую обращаться на bem.info — там есть все ответы (по теме).

Comments

[Максим]

Realetive Спасибо большое :) Буду обращаться к этому ресурсу)