БЭМ: Конвенция об именовании CSS

Я часто вижу беспорядочный код CSS, особенно если проект большой. Кроме того, я совершал эту ошибку в профессиональных или личных проектах и чувствовал, что больше не хочу смотреть на длинный код CSS с нарушенной структурой.

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

Соглашение об именовании помогает понять структуру кода. Кроме того, существует множество соглашений об именовании для CSS: например, BEM, SMACSS, OOCSS, Atomic CSS и ITCSS. Я рассмотрю соглашение BEM, поскольку оно является самым известным соглашением об именовании CSS.

Что такое BEM?

BEM расшифровывается как Block, Element, Modifier. Само название классов CSS состоит из трех категорий и помогает разработчикам создавать последовательный, модульный и многократно используемый код.

1. Блок: Элемент высокого уровня на странице. Обычно он получает название в зависимости от своего назначения или функции, например "заголовок", "меню" или "кнопка".
2. Элемент: Часть блока, имеющая отдельную функцию или значение. Для его названия используется имя блока, за которым следует двойное подчеркивание.
3. Модификатор: Вариант блока или элемента, который изменяет его внешний вид или поведение. Для его названия используется название блока или элемента, за которым следует двойное тире и название модификатора.

Рассмотрим пример

  <nav class = "navbar">
    <ul class = "navbar__menu">
      <li class = "navbar__menu-item"><a href = "#">Home</a></li>
      <li class = "navbar__menu-item"><a href = "#">About</a></li>
      <li class = "navbar__menu-item navbar__menu-item--active">
        <a href = "#">Contact</a>
      </li>
    </ul>
  </nav>

Классы в этом примере следуют конвенции BEM, что означает, что вы можете видеть, что блок navbar содержит элемент меню navbar с тремя пунктами. Обычно активное навигационное меню имеет стиль, отличный от остальных, поэтому для его выделения можно использовать модификаторы в имени класса элемента, например "navbar__menu-item - active".

Ресурсы

• https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/
• https://en.bem.info/methodology/naming-convention/