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

392

30 мая 2017, 01:03

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

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-ов есть разные свойства и общие
        // <span>Текст</span> много текста <span>Текст<span/><br><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?

Answer 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.