BEM-методология: что это и как использовать её для эффективной верстки

В мире веб-разработки каждый проект стремится к четкости и структурированности кода, которые обеспечивают не только легкость в поддержке, но и высокое качество пользовательского опыта. BEM-методология (Block, Element, Modifier) является мощным инструментом для достижения этих целей. Что такое BEM, как её применять и почему она становится неотъемлемой частью эффективной верстки в современной веб-разработке – расскажем в статье.

Что такое BEM

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

Блок — это самостоятельная часть, которую можно использовать в разных местах страницы.

Элемент — это часть блока, которая не может существовать отдельно от него и зависит от его контекста.

Модификатор — это свойство блока или элемента, которое изменяет их внешний вид или поведение.

Вот пример HTML-кода и CSS-стилей, использующих BEM-нейминг:

HTML

CSS

В данном случае menu — это блок, menu__item — элемент, а menu__item--active — модификатор.

Зачем он нужен

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

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

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

Зачем он нужен:

Организация кода:

• BEM помогает структурировать HTML и CSS, что делает код более читаемым, предсказуемым и легким в поддержке.
• Четкая система нейминга позволяет легко идентифицировать и управлять различными частями интерфейса, минимизируя ошибки и упрощая модификации.

Уменьшение конфликта стилей:

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

Переиспользуемость компонентов:

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

Гибкость и масштабируемость:

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

Плюсы и минусы

Как работать с BEM: настройка и установка

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

1. Организация проекта
   • Создайте структуру папок проекта:

   Создайте основные папки для вашего проекта, такие как css, js, images, components, чтобы организовать код и ресурсы.

   • Создайте файлы для компонентов:

   В папке components создайте отдельные папки для каждого блока. Например: button, header, footer.

2. Настройка HTML
   • Структурируйте HTML согласно BEM:

   Начните с создания блоков и элементов в HTML-файлах.

   <div class="menu"> <div class="menu__item menu__item--active">Главная</div> <div class="menu__item">Новости</div> <div class="menu__item">Контакты</div> </div>

   HTML

3. Настройка CSS
   • Создайте CSS файлы для блоков:

   В каждой папке блока создайте отдельные CSS файлы. Например: button/button.css, header/header.css.

   • Организуйте стили согласно BEM:

   Используйте уникальные классы для блоков, элементов и модификаторов:

   /* button/button.css */ .button { background-color: gray; padding: 10px; } .button--primary { background-color: blue; } .button__text { color: white; }

   CSS

4. Инструменты автоматизации (необязательно)
   • Используйте препроцессоры CSS:

   Препроцессоры, такие как Sass или LESS, могут значительно упростить работу с BEM, позволяя использовать вложенность, переменные и другие мощные возможности:

   /* button/button.scss */ .button { background-color: gray; padding: 10px; &--primary { background-color: blue; } &__text { color: white; } }

   CSS

   • Настройка сборки:

   Используйте инструменты сборки, такие как Gulp или Webpack, для автоматической компиляции, объединения и оптимизации ваших CSS файлов.

5. Документация и поддержка
   • Документируйте компоненты:

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

   • Следите за консистентностью:

   При добавлении новых компонентов или изменении существующих, следуйте BEM-методологии, чтобы поддерживать единообразие и предсказуемость кода.

   Пример структуры проекта:

   project/ │ ├── css/ │ └── main.css │ ├── components/ │ ├── button/ │ │ ├── button.html │ │ └── button.scss │ ├── header/ │ │ ├── header.html │ │ └── header.scss │ └── footer/ │ ├── footer.html │ └── footer.scss │ ├── images/ │ ├── js/ │ └── main.js │ └── index.html

   CSS

Блоки

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

HTML

Особенности блоков

• Независимость:

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

• Переиспользуемость:

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

• Модульность:

Блоки могут включать в себя элементы (части блока) и модификаторы (варианты блока или его элементов), что делает их гибкими и настраиваемыми.

Элементы

Элемент — это часть блока, которая выполняет конкретную функцию внутри этого блока. Элементы обозначаются двойным подчёркиванием (__) после названия блока.

Пример блока с элементами в HTML:

card — это блок

card__header, card__title, card__body, card__text, card__footer, card__button — это элементы этого блока.

Особенности элементов

• Зависимость от блока:

Элементы не могут существовать самостоятельно, они всегда являются частью блока.

• Уникальность именования:

Имя элемента состоит из имени блока и имени элемента, разделённых двойным подчёркиванием (__), что исключает конфликты имен.

• Функциональность:

Элементы выполняют конкретные функции внутри блока, помогая структурировать и организовывать внутренние части блока.

Модификаторы

Модификатор — это признак, который изменяет внешний вид, состояние или поведение блока или элемента. Модификаторы обозначаются одним символом подчёркивания (_). Они могут быть двух видов: булевыми или типа «ключ-значение».

Типы модификаторов

1. Булевые модификаторы:
• Используются для указания состояния или присутствия определённого стиля.
• Пример: block_modifier.
2. Ключ-значение модификаторы:
• Используются для указания различных вариантов блока или элемента.
• Пример: block_modifier_value.

Пример блока с модификаторами в HTML:

Здесь button — это блок, а button_primary и button_large — модификаторы этого блока, которые изменяют его внешний вид.

Особенности модификаторов

• Изменение поведения и стиля:

Модификаторы позволяют изменять внешний вид или поведение блоков и элементов без необходимости создавать новые блоки или элементы.

• Комбинирование модификаторов:

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

• Уникальность именования:

Модификаторы добавляются к имени блока или элемента через одинарное подчёркивание (_), что исключает конфликты имен.

Миксы

Микс — это способ объединения классов разных блоков или элементов в одном HTML-элементе для использования их стилей или функциональности.

Микс осуществляется путем добавления нескольких классов напрямую в атрибут class HTML-элемента. Например:

Пример использования миксов в HTML:

Особенности миксов

• Независимость стилей:

Позволяют комбинировать стили и функциональность блоков и элементов, избегая необходимости в наследовании или дублировании кода.

• Читаемость и поддерживаемость:

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

• Гибкость и масштабируемость:

Позволяют быстро добавлять и изменять функциональность компонентов, не затрагивая их основную структуру.

Файловая структура

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

Рекомендации по файловой структуре

1. Структура проекта:
   • blocks/: Этот каталог может содержать подкаталоги, каждый из которых представляет собой блоки (например, header, footer, menu).
   • styles/: Здесь размещаются CSS файлы. Каждый блок может иметь свой собственный CSS файл, который включает стили для соответствующего блока.
   • scripts/: JavaScript файлы, связанные с конкретными блоками или элементами, можно разместить здесь.
   • images/: Каталог для изображений, используемых в проекте.
2. Файловая структура блока:
   • Каждый блок рекомендуется размещать в отдельной папке внутри каталога blocks/. Например:

   blocks/ ├── header/ │ ├── header.css │ ├── header.html │ └── header.js ├── menu/ │ ├── menu.css │ ├── menu.html │ └── menu.js └── footer/ ├── footer.css ├── footer.html └── footer.js

   CSS

   • В данном примере для каждого блока (header, menu, footer) созданы отдельные файлы для стилей (.css), HTML-разметки (.html) и JavaScript (.js), если это необходимо.
3. Именование файлов:
   • Имена файлов обычно соответствуют имени блока или элемента. Например, header.css, menu.html.
4. Сборка и автоматизация:
   • Для управления и сборки проекта могут использоваться инструменты автоматизации, такие как Gulp, Webpack или npm скрипты. Они позволяют объединять и минифицировать CSS и JavaScript файлы, оптимизировать изображения и управлять зависимостями.

HTML (header.html):

CSS (header.css):

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

Как применять BEM для HTML и CSS

Применение методологии BEM (Block, Element, Modifier) для HTML и CSS помогает структурировать и стандартизировать код, делая его более читаемым, поддерживаемым и масштабируемым.

Принципы BEM

1. Блок (Block):
• Блок представляет собой независимую именованную сущность, которая является фундаментальным строительным блоком в BEM.
• Название блока отражает его назначение и контекст использования.
• Например, header, menu, button.
2. Элемент (Element):
• Элементы являются частями блоков и не имеют самостоятельного смысла вне контекста блока.
• Имена элементов формируются с использованием двойного подчёркивания (__).
• Например, header__logo, menu__item, button__text.
3. Модификатор (Modifier):
• Модификаторы изменяют внешний вид, состояние или поведение блоков или элементов.
• Имена модификаторов формируются с использованием одинарного подчёркивания (_).
• Например, button--primary, menu__item--active.

Пример использования BEM в HTML-разметке:

Пример стилей для вышеуказанной HTML-разметки:

Особенности применения BEM для HTML и CSS

1. Именование классов:
• Классы должны отражать иерархию блоков, элементов и модификаторов.
• Избегайте слишком длинных и сложных имен, сохраняя их понятность и ясность.
2. Компонентный подход:
• Каждый блок и элемент должен иметь свои собственные стили, что обеспечивает лучшую изоляцию и поддерживаемость кода.
3. Модификаторы для вариаций:
• Используйте модификаторы для создания различных вариаций блоков и элементов без необходимости повторения кода.
4. Поддержка и масштабируемость:
• BEM упрощает сопровождение проекта и его масштабирование, поскольку делает структуру и стили более прозрачными и предсказуемыми.

Какие перспективы у BEM

Разработанная Яндексом в начале 2000-х гг., BEM (Block, Element, Modifier) получила широкое признание благодаря своей структурированности и удобству в использовании. В настоящее время BEM продолжает оставаться актуальной и востребованной, несмотря на появление других методологий и подходов к организации кода в веб-разработке.

Перспективы BEM

1. Стандартизация и прозрачность:
• BEM способствует стандартизации именования классов в HTML и CSS, что улучшает читаемость и поддерживаемость кода. Это особенно важно для крупных проектов и команд разработчиков.
2. Масштабируемость проектов:
• Благодаря четкому разделению на блоки, элементы и модификаторы, BEM облегчает масштабирование проектов. Разработчики могут легко добавлять новые компоненты и вариации без опасения конфликтов и пересечений стилей.
3. Совместимость с другими технологиями:
• BEM хорошо интегрируется с другими технологиями и фреймворками, такими как React, Angular, Vue.js и другими, что позволяет использовать его принципы в современных SPA-приложениях.
4. Поддержка сообществом:
• Веб-разработчики продолжают активно обмениваться опытом и лучшими практиками по применению BEM. Это поддерживает развитие методологии и способствует её адаптации к различным проектам и требованиям.
5. Развитие инструментов поддержки:
• С появлением различных инструментов и плагинов для автоматизации создания BEM-классов, например, генераторов классов или расширений для редакторов кода, использование BEM становится еще более удобным и эффективным.
6. Продолжение обучения и документации:
• Продолжается разработка и улучшение документации по BEM, что помогает новым и опытным разработчикам быстрее осваивать методологию и использовать её в своих проектах.

Типичные ошибки и как их исправить

Неправильное именование классов:

• Проблема: Имена классов не соответствуют принципам BEM, могут быть слишком общими или недостаточно информативными.
• Исправление: Придерживайтесь следующих правил:
• Используйте понятные имена, отражающие смысл блока или элемента.
• Не используйте слишком длинные имена, которые затрудняют чтение и понимание кода.
• Избегайте использования аббревиатур, если они не являются широко распространёнными и понятными всем членам команды.

Неправильное использование модификаторов:

• Проблема: Модификаторы применяются неправильно или неэффективно.
• Исправление:
• Используйте модификаторы для изменения внешнего вида, состояния или поведения блока или элемента, но избегайте создания избыточного количества модификаторов.
• Не создавайте излишнее количество модификаторов, если они могут быть заменены комбинацией блоков и элементов.

Нарушение иерархии блоков и элементов:

• Проблема: Неправильное вложение элементов в блоки или неправильное использование блоков и элементов.
• Исправление:
• Соблюдайте иерархию блоков и элементов: блок может содержать только элементы, элементы — только внутри блоков.
• Избегайте использования блоков в качестве элементов и наоборот.

Дублирование кода и стилей:

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

Недостаточная документация и обучение:

• Проблема: Отсутствие четких руководств и документации для новых участников команды.
• Исправление:
• Создайте подробную документацию по правилам и стандартам BEM для вашего проекта.
• Обучайте новых членов команды методологии BEM и правилам его использования.

Неэффективная организация файлов и структуры проекта:

• Проблема: Блоки, элементы и стили расположены хаотично, что затрудняет их поиск и поддержку.
• Исправление:
• Организуйте файловую структуру проекта согласно принципам BEM.
• Размещайте файлы стилей и скриптов для каждого блока и элемента в отдельных папках.

Главное, что нужно знать

Что такое BEM:

• BEM — это методология именования классов в HTML и CSS, разработанная Яндексом. Она структурирует код, используя три основных концепта: блоки (block), элементы (element) и модификаторы (modifier). BEM способствует созданию модульного и масштабируемого кода в веб-разработке.

Элементы BEM:

• Блок (Block): Независимый компонент, который может содержать другие блоки или элементы. Примеры: header, menu, button.
• Элемент (Element): Части блока, которые не имеют смысла вне контекста блока. Имена элементов формируются с использованием двойного подчёркивания (__). Примеры: header__logo, menu__item.
• Модификатор (Modifier): Изменения внешнего вида, состояния или поведения блока или элемента. Имена модификаторов формируются с использованием одинарного подчёркивания (_). Примеры: button--primary, menu__item--active.

Преимущества BEM:

• Улучшает читаемость и поддерживаемость кода благодаря чёткой структуре и именованию классов.
• Способствует созданию модульного кода, который легко переиспользовать и модифицировать.
• Повышает эффективность работы в команде, упрощая взаимодействие между разработчиками.

Реализация в проекте:

• Каждый блок и элемент должен иметь уникальное имя класса, отражающее его функциональность и контекст использования.
• Использование модификаторов позволяет создавать различные вариации блоков и элементов без необходимости дублирования кода.
• Важно соблюдать иерархию и правила BEM во всех частях проекта, от HTML-разметки до CSS стилей.

Рекомендованные программы обучения

«Разработка, сопровождение и обеспечение безопасности информационных систем», бакалавриат«Программное обеспечение, Интернет и облачные технологии», магистратура«Веб-разработка», бакалавриат«Fullstack-разработчик», бакалавриат«Программист», колледж«Разработка блокчейн-приложений», бакалавриат«Программирование на языке Python», курсы«Разработка и тестирование программного обеспечения», бакалавриат«Веб-разработчик», колледж«Программная инженерия с использованием мультимедиа», бакалавриат