BEM buttons, how right?

Question

css

Hi, I started to deal with BEM and maybe I didn’t understand something, but a question has arisen.
There is a button .btnthat is reused many times in the project. Moreover, when reused, the button can be a block or inline element: div.btn, a.btn, button.btn... Correspondingly, questions arise about the use of the property display.
For example, I need a link button <a href="#" class="btn">go</a>, but I need it in the form of a block, i.e. need to be added display: block. The question is where do I need to add this property i.e. at what level to decide such moments? At the level of modifiers for itself .btnor set displayfor the element of the block into which this button (mix) is inserted <a href="#" class="btn parent-block__btn">? Are there any general guidelines for such cases, or does it all depend on the project?

Answer 1

Buttons in 99% of cases display: inline-block;, if you need to make some button full width, then the best solution would be to mix with the element, in my opinion a modifier is not needed here.

Answer 2

As an option, hang all repeating styles on the .btn block. and where the display is applied, use a separate class and mix with .btn.

Answer 3

Everything is detailed here for you !

<!-- Блок `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

If this element can be used without a block, then specifying ".parent-block__btn" is not necessary, because this element is not attached to the block, it will be ".btn"
If this block can have different properties (modifiers), then create separate styles with these differences. ".btn .btn_div", ".btn .btn_a", ".btn .btn_button".