БЭМ

БЭМ — основная методология, которая используется по умолчанию на всех проектах. В терминологии БЭМ компонентом является сам блок, настраивается компонент через модификаторы.

Сущности

Методология состоит из трех основных сущностей: блок, элемент и модификатор:

• Блок — имя компонента, которое задает пространство имен для классов элементов \ модификаторов.
• Элемент — какая-то сущность внутри блока. Полное имя элемента cодержит в качестве префикса имя блока. Например, .header__container — header — имя блока, container — имя элемента. __ — используется для разделения этих двух имен.
• Модификатор — класс, который как-то дополняет или изменяет внешний вид или поведение компонента. Модификатор может относиться либо к блоку целиком, либо к отдельному элементу. Например, .header_size_big или .header__container_size_big — полное имя модификатора содержит имя блока \ элемента, затем разделитель _ и затем сам модификатор, название (size) и значение (big). Модификатор может быть булевым, тогда он содержит только название, например, .header_disabled или .header__container_disabled.

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

Подробное описание методологии

Правила

• Не допускается создание вложенных элементов. Допускается создание сложных элементов в тех случаях, когда это одна-две обертки над исходным элементом, которые необходимы для визуальной части. Например, .header__image-wrapper.

    /* Недопустимо */
    .block__element__subelement { ... }
  
    /* Допустимо */
    .block__element-subelement { ... }
  
    /* Правильно */
    .block__subelement { ... }
  

• В случае наличия большого числа одинаковых элементов, которые связаны общим смыслом и не являются визуальным обертками, стоит вынести таким элементы в отдельный блок:

    /* Недопустимо */
    .header__user  { ... }
    .header__user-name { ... }
    .header__user-image-wrapper { ... }
    .header__user-image { ... }
  
    /* Правильно */
    .user  { ... }
    .user__name { ... }
    .user__image-wrapper { ... }
    .user-image { ... }
  

• Модификатор должен решать только одну задачу. Для создания более сложных видов используйте несколько независимых модификаторов. В будущем каждый из них можно будет использовать по отдельности

  /* Недопустимо */
  .block { ... }
  .block_color_important {
    color: red;
    border-radius: 10px;
    height: 50px
  }  
  
  /* Правильно */
  .block { ... }
  .block_color_important {
    color: red;
  }
  .block_rounded {
    border-radius: 10px;
  }
  .block_size_big {
    height: 50px
  }
  

• Используйте булевы модификаторы только в тех случаях, когда состояние блока имеет только одно возможное значение и не предполагается других сходных модификаторов.

  /* Недопустимо */
  .block { ... }
  .block_big {
    /* big отвечает за размер. В будущем могут появится другие состояния, */
    /* который являются частью одной группы */
  }  
  
  /* Правильно */
  .block { ... }
  .block_size_big {
    /* Поместили big в группу модификаторов size, */
    /* который может принимать различные значения, */
    /* но каждый модификатор из группы отвечает именно за размер */
  }  
  .block_disabled {
    /* модификатор отвечает только за «заблокированность» элемента. */
    /* Она не предполагает других состояний кроме как */
    /* заблокировано \ разблокировано */
  }