Что такое BEM и какие есть альтернативные соглашения по неймингу классов?

1️⃣ Как кратко ответить

BEM (Block, Element, Modifier) — это методология для именования CSS классов, которая помогает создавать масштабируемые и поддерживаемые интерфейсы. Она структурирует код, разделяя его на блоки, элементы и модификаторы. Альтернативные соглашения по неймингу классов включают SMACSS, OOCSS и ITCSS, которые также направлены на улучшение организации и поддерживаемости CSS кода.

2️⃣ Подробное объяснение темы

BEM — это методология, разработанная в компании Яндекс, которая помогает разработчикам создавать более структурированный и поддерживаемый CSS код. Основная идея BEM заключается в разделении интерфейса на независимые блоки, что упрощает их повторное использование и модификацию.

Основные концепции BEM

1. Блок (Block): Независимый компонент, который может быть использован повторно. Например, это может быть кнопка, форма или меню. Блоки не зависят от других компонентов и могут существовать автономно.

2. Элемент (Element): Составная часть блока, которая не может существовать отдельно от него. Элементы зависят от блока и обозначаются через двойное подчеркивание. Например, в блоке menu элемент может быть menu__item.

3. Модификатор (Modifier): Определяет внешний вид, состояние или поведение блока или элемента. Модификаторы обозначаются через двойное дефис. Например, button--primary может обозначать основную кнопку.

Пример BEM

<div class="menu">
  <ul class="menu__list">
    <li class="menu__item menu__item--active">Home</li>
    <li class="menu__item">About</li>
    <li class="menu__item">Contact</li>
  </ul>
</div>

• menu — это блок, представляющий собой меню.
• menu__list — элемент, который является списком внутри блока menu.
• menu__item — элемент, представляющий пункт меню.
• menu__item--active — модификатор, который изменяет состояние элемента menu__item, делая его активным.

Зачем нужен BEM

BEM помогает избежать конфликтов имен классов и делает код более читаемым и поддерживаемым. Он способствует созданию модульного CSS, где каждый компонент может быть легко изменен или переиспользован без влияния на другие части кода.

Альтернативные соглашения по неймингу классов

1. SMACSS (Scalable and Modular Architecture for CSS): Подход, который фокусируется на разделении стилей на пять категорий: базовые, макетные, модульные, состояний и тем. SMACSS помогает организовать CSS в более структурированную и модульную систему.

2. OOCSS (Object-Oriented CSS): Методология, которая поощряет разделение структуры и внешнего вида. Она фокусируется на создании повторно используемых CSS классов, которые можно комбинировать для создания сложных интерфейсов.

3. ITCSS (Inverted Triangle CSS): Архитектура, которая организует CSS в виде перевернутого треугольника, начиная с глобальных стилей и заканчивая специфичными. ITCSS помогает управлять каскадом и специфичностью стилей.

Каждое из этих соглашений имеет свои преимущества и может быть выбрано в зависимости от специфики проекта и предпочтений команды. BEM, SMACSS, OOCSS и ITCSS — это инструменты, которые помогают разработчикам создавать более чистый, поддерживаемый и масштабируемый CSS код.