БЭМ именование и структура

#css #бэм

Помогите разобраться.

1) Можно ли в БЭМ делать вложенности class в class?

.class {
  .class1 {}
  .class2 {}
}


2) Бывают случаи, когда необходимо добавить padding или margin одному элементу или
к нескольким. Как именовать в таком случае?

block
  block__elem
  block__elem_mod
  block__elem_mod
  block__elem_mod # Этому, к примеру, нужно дополнительно добавить margin


Как поступить в этом случае, если mod для всех общий. Добавлять еще mod? block__elem_mod_mod?



По просьбе Виталия Емельянцева. Уточняю случаи ко второму вопросу:

 .car {
      .car__header {
        .car__header_title {}
        .car__header_img {}
        .car__header_name {}
        .car__header_description {
          .car__header_description_span?
          // Как именовать? Уточним что у span-ов есть разные свойства и общие
        // Текст много текста Текст
Текст
        }
      }
      .car__main {
        .car__main_description {}
      }
      .car__footer {
       .car__footer_description{}
     }
  }


Или:

.header
  .header__menu
    .header__menu_nav
      .header__menu_nav_link ?
        .header__menu_nav_link_active ? .header__menu_nav_link-active?

    

Ответы

Ответ 1

Можно ли в БЭМ делать вложенности class в class?

О чем идет речь в вопросе?


Можно ли в верстке, или можно ли в стилях?
class в class или БЭМ-блок в БЭМ-блок? Или элемент и модификатор в блок?


Можно ли в верстке..

Да, конечно. Ваш html - это дерево нод, которым вы вольны присваивать любые классы.
И следовательно "вкладывать" одни классы в другие.

То же касается БЭМ-блоков. Одни блоки вы можете использовать в составе других, свободно,
например:

form.form
  .form-group
    label.label
    input.input type="text"
  .form-group
    button.button.button_blue type="submit"


Блоки .label, .input, и .button "вложены" в блоки .form-group, которые "вложены"
в блок .form.

Можно ли в стилях..

Можно. Во-первых, удобно вкладывать элементы в одноименный блок:

.promo-section
  .promo-section__title
  .promo-section__text


А модификатор этого блока лучше располагать на одном с ним уровне:

# promo-section.css

.promo-section
  .promo-section__title
  .promo-section__text

.promo-section_wide
  .promo-section__title
  .promo-section__text


Так вы сможете назначать и стили для элементов блока, и стили для модифицированного
блока.

Во-вторых, если вам нужно уточнить стили одного блока, когда он находится внутри
другого - вы можете вложить его внутрь так, будто он - элемент. На примере с формой:

# input.css

.input
  # Общие стили блока инпута .input


# form.css

.form
  .input
    # Уточняющие стили для любого инпута, находящегося внутри формы .form




Как добавить padding/margin одному или нескольким элементам блока

Например такой код:

.promo-section
  .promo-section__title
  .promo-section__text Один абзац
  .promo-section__text Второй абзац
  .promo-section__text Третий абзац


И вам нужно конкретно второй абзац стилизовать чуть иначе. И последний абзац стилизовать
чуть иначе.

Стилизовать последний..

Может подойти селектор :last-child. Например:

.promo-section
  .promo-section__text
    margin-bottom: 10px

  .promo-section__text:last-child
    margin-bottom: 0


Стилизовать второй по-особому..

Добавьте второму дополнительный класс. Какой? Зависит от задачи:


Можно модификатор элемента вида .promo-section__text_special;
Можно блок, чтобы получился микс из элемента и блока (.promo-section__text.text-right).




"Уточняю случаи ко второму вопросу"

Первый ваш пример оторван от реальности. Уже писал об этом в комментариях, упомяну
и здесь. В вашем приведенном примере странно названы модификаторы. "Шапка машины" -
очевидно, элемент. "Шапка машины заголовочная", "шапка машины рисуночная", "шапка машины
описательная"? Странное название для модификаторов. По смыслу больше подходит на элемент
внутри элемента внутри блока.

Второй ваш пример подтверждает догадки - внутри "меню шапки" (элемента) вы пытаетесь
расположить "ссылку" и "ссылку активную" (элемент внутри элемента внутри блока).

Такие ситуации решаются двумя способами:

Именование элементов без вложенности

.header
  .header__link
  .header__link_active
  .header__menu
  .header__menu_nav
    .header__link
    .header__link_active


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

Разбиение на отдельные блоки

.link
.link_active

.header
  .header__menu
  .header__menu_nav
    .link
    .link_active


.link здесь - отдельный БЭМ-блок. А внутри блока .header вы ее дополнительно стилизуете,
для ситуаций, когда она встречается внутри .header__menu_nav.