Как делать кнопки БЭМ?

Question

[EarthFM]

Сразу скажу, сайты с помощью БЭМ-а не делал)
На сайте будут кучу кнопок и не одинаковых, я правильно понял, что создаём блок .btn, а дальше если кнопка search, то создаём модификатор .btn_search и т.д. То есть для каждого типа кнопок создаём модификатор? (.btn_search, .btn_submit)

Answer 1

[Константин Величко]

Моя реализация бэм кнопок
button.styl

Answer 2

[i]

Все верно, основной класс .btn описывает общий стиль, а .btn_search модификацию или дополнение, применяем следующим образом:

<div class="btn btn_search">search</div>

Стоит отметить, что .btn_search т.н. булев модификатор, по методологии может быть еще модификатор вида «ключ-значение» .btn_type_search (см. подробнее Соглашение по именованию/Имя модификатора). Предположу, что для вашей задачи больше подойдет модификатора вида «ключ-значение»:

<div class="btn btn_type_search">search</div>
<div class="btn btn_type_submit">submit</div>

Рекомендую посмотреть на блок button из библиотеки bem-components.

Comments

[EarthFM]

Спасибо за подробный ответ)