БЭМ-кнопки, как правильно?

Question

[feelsgood]

Привет, начал разбираться с БЭМом и может я чего не понял, но назрел вопрос.

Есть кнопка .btn, которая в проекте очень много раз переиспользуется. Причем при переиспользовании кнопка может быть блочным или строчным элементом: div.btn, a.btn, button.btn… Соответсвенно возникают вопросы по использованию свойства display.

Например мне нужна кнопка-ссылка <a href="#" class="btn">go</a>, но нужна она мне в виде блока, т.е. нужно добавить display: block. Вопрос в том, куда мне нужно добавить это свойство, т.е. на каком уровне решать такие моменты? На уровне модификаторов для самой .btn или задавать display для элемента того блока в который вставляется эта кнопка(микс) <a href="#" class="btn parent-block__btn">? Есть ли какие-нибудь общие рекомендации для таких случаев или это все зависит от проекта?

Answer 1

[Олег]

Кнопки в 99% случаев display: inline-block;, если нужно какую-то кнопку сделать во всю ширину, то лучшим решением будет сделать микс с элементом, модификатор на мой взгляд тут не нужен.

Comments

[feelsgood]

Тогда возникает проблема с переопределением стилей. Если стили для элемента будут выше стилей для кнопки, тогда переопределить не получится

[Милок Мурлыка]

feelsgood: В бэм есть система зависимостей https://ru.bem.info/platform/deps/

[Олег]

feelsgood: Используйте стек яндекса, там это учитывается, также скоро будет готова моя сборка (bemgo), где также будет поддержка миксов

Answer 2

[Novamoscow]

Как вариант на блок .btn повесить все повторяющие стили. а туда где применятся дисплей, применяйте отдельный класс и миксуйте с .btn.

Answer 3

[Шамсудин Сердеров]

Вам сюда там все подробнее описано!

<!-- Блок `search-form` -->
<form class="search-form">
    <!-- Элемент `input` блока `search-form` -->
    <input class="search-form__input">

    <!-- Элемент `button` блока `search-form` -->
    <button class="search-form__button">Найти</button>
</form>

Answer 4

[Евгений Кравченко]

Если этот элемент может использоваться без блока, то указывать ".parent-block__btn" не надо, т.к. этот элемент не привязан к блоку, будет ".btn"

Если этот блок может иметь разные свойства (модификаторы), то создайте отдельные стили с этими различиями. ".btn .btn_div", ".btn .btn_a", ".btn .btn_button".

Comments

[Novamoscow]

методология советует не привязываться к тэгам. Тэг вы можете поменять.

[Евгений Кравченко]

Novamoscow: автор вопроса во втором абзаце перечислял возможные варианты тегов) я здесь привел пример по аналогии, чтобы не запутать