Как более правильно разбивать стилизацию Блока по БЭМ?

Question

[Василий]

Рассматриваем только большой проект.
Вот у меня есть кнопка и мне нужно дать есть классы в которые мне нужно запаковать её стили.

Я накопал что нужно разбить на стили которые отвечают за внешний вид элемента, позиционирование и за размер блока. Поправьте меня если я ошибся.

Например у меня есть кнопка и я получается должен присвоить три класса, первый - это внешний вид, второй - это размеры(блока или элемента), третий это отступы?

<button class="button-form button-form_size-s button-form_layout">Log in</button>

Как правильно подбирать имена например для класса который отвечает за позицтонирование?
В моём случае там есть отступ с верху и кнопка располагаеться по центру.

Answer 1

[Иван В]

Например у меня есть кнопка и я получается должен присвоить три класса, первый - это внешний вид, второй - это размеры(блока или элемента), третий это отступы?

Вы не верно поняли БЭМ. Должно быть иначе.

Допустим, у вас есть блок с формой (например, с классом "form"), у блока есть дочерний элемент в виде кнопки. Тогда по БЭМ, у кнопки будет класс "form__button" (блок__элемент).

Допустим, в форме несколько кнопок, стандартные и "большие". Тогда для "большой" кнопки добавляем класс "form__button--large" (блок__элемент--модификатор). А в селекторе "form__button--large" пишем нужные свойства.
Сама кнопка будет иметь уже два класса, типа

<button class="form__button form__button--large"></button>

Допустим, у больших и стандартных кнопок часть будут "зелеными". Тогда для "зеленых" кнопок добавляем класс "form__button--green".
В таком случае часть стандартных кнопок будут иметь такой вид

<button class="form__button form__button--green"></button>

а часть "больших" будет выглядеть так

<button class="form__button form__button--large form__button--green"></button>

В Модификаторе можно прописывать любое свойство Элемента (размер, цвет, позиция и т.д.), но только когда нам нужно модифицировать какой-то уже имеющийся элемет. Специально разбивать свойства на разные селекторы (как в вашем примере) не имеет смысла, тем более если элемент один.

Comments

[Дмитрий Карпов]

Обычно например классу как .button делают блоком и задают стиль оформления, а через элемент form__button позиционирование. Ну и модификаторы button--green. Потому что он ещё не раз может встретиться на странице