Войти с помощью github
Форум /

Всем добрый день!

Есть такой кейс:

<!-- Тема «default» -->
<button class="button button_theme_default">
  <div class="button__text">Отправить</div>
</button>

<!-- Тема «outline» -->
<button class="button button_theme_outline">
  <div class="button__text">Отправить</div>
</button>

Так же есть, например, модификатор button_size_small который меняет размер button__text. Проблема/вопрос заключается в том, что есть необходимость при разных значениях модификатора button_theme_{name} менять поведение модификатора button_size_small, другими словами их связать. Итого при default и размере small хочется у button__text размер, например, 12px, а при outline и размере small хочется у button__text размер 14px.

Какие я вижу варианты:

  1. переименовать блок, например, вместо buttonbutton-outline.
  2. связывать модификаторы .button_theme_outline.button_size_small.
  3. добавить размер к названию темы, например, .button_theme_outline-small.

Более привлекательным (для меня) является 2-ой вариант. Но какой путь более правильный по БЭМ?

Спасибо!