vasily_konnov
@vasily_konnov
Frontend developer

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

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

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

Например у меня есть кнопка и я получается должен присвоить три класса, первый - это внешний вид, второй - это размеры(блока или элемента), третий это отступы?
<button class="button-form button-form_size-s button-form_layout">Log in</button>


Как правильно подбирать имена например для класса который отвечает за позицтонирование?
В моём случае там есть отступ с верху и кнопка располагаеться по центру.
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ответы на вопрос 1
verkhoturov
@verkhoturov
HTML-Верстальщик / Frontend Developer
Например у меня есть кнопка и я получается должен присвоить три класса, первый - это внешний вид, второй - это размеры(блока или элемента), третий это отступы?


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

Допустим, у вас есть блок с формой (например, с классом "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>


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы