CSS. Связывание модификаторов. Как правильно по методологии БЭМ?

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

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

<!-- Тема «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.

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

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

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

Спасибо!

5 years ago

Realetive

Второй. Каскад от темы вполне здоровая практика, можно найти примеры и в самих bem-components.

5 years ago

ivanchurkin

Второй. Каскад от темы вполне здоровая практика, можно найти примеры и в самих bem-components.

Спасибо за ответ!

В подтверждение ваших слов приложу ссылку на исходный код:

https://github.com/bem/bem-components/blob/c40c5f271401326a80bfdc1fd9924d56c68628f6/design/common.blocks/button/_theme/button_theme_simple.post.css#L33

Получается, если я правильно понял синтаксис, то связывание так и работает:

.button_theme_simple.button_disabled {
  opacity: 0.6;
}

И, таким образом, вполне правильным (по методологии БЭМ) является кейс:

<button class="button button_theme_outline button_size_small button_has-icon button_has-shadow button_disabled">
  <div class="button__text">Отправить</div>
</button>

Когда один модификатор может зависеть от другого (или нескольких?):

/** модификаторы блока */
.button_has-icon {}
.button_has-shadow {}
.button_size_small {}
.button_disabled {}

/** корректировка поведения модификатора от темы «outline» */
.button_theme_outline.button_has-icon {}
.button_theme_outline.button_has-shadow {}
.button_theme_outline.button_size_small {}
.button_theme_outline.button_disabled {}

/**
 * НО возможна и более «глубокая» связь?
 *
 * Например, если в теме «outline» при размере «small» размер тени должен быть меньше,
 * то допустима следующая конструкция?
 */
.button_theme_outline.button_size_small.button_has-shadow {}

5 years ago

Realetive

👌 👍

Да, допустима. По сути, вы описываете правило «Если у блока button установлен модификатор theme в значении outline и модификатор size в значении small и модификатор has-shadow, назначить ему следующие стили: …», т. е. это «уточняющий» каскад, а не просто ради «перебивки» специфичности. По сути вы описали одно из ключевых правил БЭМ — не запрет каскада, а обдуманное его использование там, где это необходимо. Вроде и просто и очевидно, но теперь я, например, работая с вашим проектом, с большей вероятностью не «наделаю делов».

Чтобы оставлять комментарии, необходимо авторизоваться.