В мире веб-разработки каждый проект стремится к четкости и структурированности кода, которые обеспечивают не только легкость в поддержке, но и высокое качество пользовательского опыта. BEM-методология (Block, Element, Modifier) является мощным инструментом для достижения этих целей. Что такое BEM, как её применять и почему она становится неотъемлемой частью эффективной верстки в современной веб-разработке — расскажем в статье.
Что такое BEM
BEM (Block, Element, Modifier) — это методология в веб-разработке, предназначенная для создания структурированной и многократно используемой вёрстки. Она позволяет разработчикам создавать независимые компоненты интерфейса с помощью системы именования, которая упрощает поддержку, расширение и масштабирование кода.
Блок — это самостоятельная часть, которую можно использовать в разных местах страницы.
Элемент — это часть блока, которая не может существовать отдельно от него и зависит от его контекста.
Модификатор — это свойство блока или элемента, которое изменяет их внешний вид или поведение.
Вот пример HTML-кода и CSS-стилей, использующих BEM-нейминг:
<div class="menu"> |
HTML
.menu { |
CSS
В данном случае menu — это блок, menu__item — элемент, а menu__item--active — модификатор.
Зачем он нужен
BEM используют веб-разработчики и дизайнеры для создания и поддержки структурированных и легко расширяемых веб-приложений и корпоративных сайтов.
Лучше всего применять BEM с самого начала проекта или при рефакторинге уже существующего кода. Это позволяет обеспечить повторное использование компонентов и их модификацию, что особенно полезно для крупных проектов с адаптивными интерфейсами.
BEM основан на чётком разделении стилей для блоков, элементов и модификаторов. Такой подход делает код предсказуемым и легко поддерживаемым.
Зачем он нужен:
Организация кода:
- BEM помогает структурировать HTML и CSS, что делает код более читаемым, предсказуемым и легким в поддержке.
- Четкая система нейминга позволяет легко идентифицировать и управлять различными частями интерфейса, минимизируя ошибки и упрощая модификации.
Уменьшение конфликта стилей:
- Избегает пересечения стилей благодаря уникальным именам блоков, элементов и модификаторов.
- Повышает предсказуемость и стабильность интерфейса.
Переиспользуемость компонентов:
- Компоненты, созданные с использованием BEM, можно легко переиспользовать в различных частях приложения или проекта.
- Повышает эффективность разработки за счет модульности.
Гибкость и масштабируемость:
- Подходит как для небольших проектов, так и для крупных приложений с сложной структурой.
- Облегчает добавление новых компонентов и стилей.
Плюсы и минусы
Плюсы BEM | Минусы BEM |
Код становится более читаемым и структурированным, что облегчает его поддержку и развитие. | Имена классов могут быть длинными и менее удобными для быстрого написания. |
Компоненты легко переиспользовать в различных частях проекта, что повышает эффективность разработки. | Для небольших проектов применение BEM может оказаться излишне сложным. |
Уникальные имена блоков, элементов и модификаторов предотвращают пересечение стилей. | Больше кода для написания, так как каждая часть интерфейса имеет свой уникальный класс. |
С помощью модификаторов можно легко изменять внешний вид и поведение компонентов. | Новичкам может потребоваться время для изучения и освоения методологии BEM. |
Подходит для проектов любого размера, облегчая добавление новых компонентов и стилей. | Требуется продуманное планирование структуры классов и компонентов. |
Обеспечивает единообразие в коде, что особенно полезно при работе в команде. | Длинные и сложные классы могут затруднить визуальное восприятие кода. |
Как работать с BEM: настройка и установка
Для работы с BEM не нужно устанавливать специальное программное обеспечение, поскольку это методология написания кода. Однако, чтобы лучше организовать проект и использовать все преимущества BEM, можно применять определённые инструменты и подходы.
- Организация проекта
- Создайте структуру папок проекта:
Создайте основные папки для вашего проекта, такие как css, js, images, components, чтобы организовать код и ресурсы.
- Создайте файлы для компонентов:
В папке components создайте отдельные папки для каждого блока. Например: button, header, footer.
- Настройка 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
- Настройка 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
- Инструменты автоматизации (необязательно)
- Используйте препроцессоры CSS:
Препроцессоры, такие как Sass или LESS, могут значительно упростить работу с BEM, позволяя использовать вложенность, переменные и другие мощные возможности:
/* button/button.scss */
.button {
background-color: gray;
padding: 10px;
&--primary {
background-color: blue;
}
&__text {
color: white;
}
}CSS
- Настройка сборки:
Используйте инструменты сборки, такие как Gulp или Webpack, для автоматической компиляции, объединения и оптимизации ваших CSS файлов.
- Документация и поддержка
- Документируйте компоненты:
Ведите документацию для каждого блока, описывая его структуру и назначение классов.
- Следите за консистентностью:
При добавлении новых компонентов или изменении существующих, следуйте 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.htmlCSS
Блоки
Блок — это самостоятельная и независимая часть проекта, которая имеет значение сама по себе и может многократно использоваться в разных частях проекта. Блоки могут содержать элементы и модификаторы, которые изменяют их функциональность и внешний вид.
<div class=«menu»> |
HTML
Особенности блоков
- Независимость:
Блоки могут быть использованы автономно, без зависимости от других частей кода.
- Переиспользуемость:
Один и тот же блок может быть использован в разных частях проекта, что способствует модульности и уменьшению дублирования кода.
- Модульность:
Блоки могут включать в себя элементы (части блока) и модификаторы (варианты блока или его элементов), что делает их гибкими и настраиваемыми.
Элементы
Элемент — это часть блока, которая выполняет конкретную функцию внутри этого блока. Элементы обозначаются двойным подчёркиванием (__) после названия блока.
Пример блока с элементами в HTML:
<div class=«card»> |
card — это блок
card__header, card__title, card__body, card__text, card__footer, card__button — это элементы этого блока.
Особенности элементов
- Зависимость от блока:
Элементы не могут существовать самостоятельно, они всегда являются частью блока.
- Уникальность именования:
Имя элемента состоит из имени блока и имени элемента, разделённых двойным подчёркиванием (__), что исключает конфликты имен.
- Функциональность:
Элементы выполняют конкретные функции внутри блока, помогая структурировать и организовывать внутренние части блока.
Модификаторы
Модификатор — это признак, который изменяет внешний вид, состояние или поведение блока или элемента. Модификаторы обозначаются одним символом подчёркивания (_). Они могут быть двух видов: булевыми или типа «ключ-значение».
Типы модификаторов
- Булевые модификаторы:
- Используются для указания состояния или присутствия определённого стиля.
- Пример: block_modifier.
- Ключ-значение модификаторы:
- Используются для указания различных вариантов блока или элемента.
- Пример: block_modifier_value.
Пример блока с модификаторами в HTML:
<div class="button button_primary button_large"> |
Здесь button — это блок, а button_primary и button_large — модификаторы этого блока, которые изменяют его внешний вид.
Особенности модификаторов
- Изменение поведения и стиля:
Модификаторы позволяют изменять внешний вид или поведение блоков и элементов без необходимости создавать новые блоки или элементы.
- Комбинирование модификаторов:
Один блок или элемент может иметь несколько модификаторов одновременно, что позволяет создавать различные комбинации стилей и состояний.
- Уникальность именования:
Модификаторы добавляются к имени блока или элемента через одинарное подчёркивание (_), что исключает конфликты имен.
Миксы
Микс — это способ объединения классов разных блоков или элементов в одном HTML-элементе для использования их стилей или функциональности.
Микс осуществляется путем добавления нескольких классов напрямую в атрибут class HTML-элемента. Например:
<div class="block1 block2 block3__element"> |
Пример использования миксов в HTML:
<div class="card"> |
Особенности миксов
- Независимость стилей:
Позволяют комбинировать стили и функциональность блоков и элементов, избегая необходимости в наследовании или дублировании кода.
- Читаемость и поддерживаемость:
Делают код более читаемым, сохраняя явную связь между использованными компонентами.
- Гибкость и масштабируемость:
Позволяют быстро добавлять и изменять функциональность компонентов, не затрагивая их основную структуру.
Файловая структура
В BEM файловая структура не имеет строгих установленных правил, так как BEM сконцентрирована на именовании классов CSS и организации HTML-разметки. Однако, хорошая практика включает организацию файлов для удобства работы и поддержки проекта.
Рекомендации по файловой структуре
- Структура проекта:
- blocks/: Этот каталог может содержать подкаталоги, каждый из которых представляет собой блоки (например, header, footer, menu).
- styles/: Здесь размещаются CSS файлы. Каждый блок может иметь свой собственный CSS файл, который включает стили для соответствующего блока.
- scripts/: JavaScript файлы, связанные с конкретными блоками или элементами, можно разместить здесь.
- images/: Каталог для изображений, используемых в проекте.
- Файловая структура блока:
- Каждый блок рекомендуется размещать в отдельной папке внутри каталога blocks/. Например:
blocks/
├── header/
│ ├── header. css
│ ├── header. html
│ └── header. js
├── menu/
│ ├── menu. css
│ ├── menu. html
│ └── menu. js
└── footer/
├── footer. css
├── footer. html
└── footer. jsCSS
- В данном примере для каждого блока (header, menu, footer) созданы отдельные файлы для стилей (.css), HTML-разметки (.html) и JavaScript (.js), если это необходимо.
- Именование файлов:
- Имена файлов обычно соответствуют имени блока или элемента. Например, header. css, menu.html.
- Сборка и автоматизация:
- Для управления и сборки проекта могут использоваться инструменты автоматизации, такие как Gulp, Webpack или npm скрипты. Они позволяют объединять и минифицировать CSS и JavaScript файлы, оптимизировать изображения и управлять зависимостями.
HTML (header.html):
<div class=«header»> |
CSS (header.css):
.header { |
Хорошо организованная файловая структура помогает поддерживать порядок и чистоту в проекте, делая его более понятным и легко поддерживаемым как для одного разработчика, так и для команды.
Как применять BEM для HTML и CSS
Применение методологии BEM (Block, Element, Modifier) для HTML и CSS помогает структурировать и стандартизировать код, делая его более читаемым, поддерживаемым и масштабируемым.
Принципы BEM
- Блок (Block):
- Блок представляет собой независимую именованную сущность, которая является фундаментальным строительным блоком в BEM.
- Название блока отражает его назначение и контекст использования.
- Например, header, menu, button.
- Элемент (Element):
- Элементы являются частями блоков и не имеют самостоятельного смысла вне контекста блока.
- Имена элементов формируются с использованием двойного подчёркивания (__).
- Например, header__logo, menu__item, button__text.
- Модификатор (Modifier):
- Модификаторы изменяют внешний вид, состояние или поведение блоков или элементов.
- Имена модификаторов формируются с использованием одинарного подчёркивания (_).
- Например, button--primary, menu__item--active.
Пример использования BEM в HTML-разметке:
<!DOCTYPE html> |
Пример стилей для вышеуказанной HTML-разметки:
.header { |
Особенности применения BEM для HTML и CSS
- Именование классов:
- Классы должны отражать иерархию блоков, элементов и модификаторов.
- Избегайте слишком длинных и сложных имен, сохраняя их понятность и ясность.
- Компонентный подход:
- Каждый блок и элемент должен иметь свои собственные стили, что обеспечивает лучшую изоляцию и поддерживаемость кода.
- Модификаторы для вариаций:
- Используйте модификаторы для создания различных вариаций блоков и элементов без необходимости повторения кода.
- Поддержка и масштабируемость:
- BEM упрощает сопровождение проекта и его масштабирование, поскольку делает структуру и стили более прозрачными и предсказуемыми.
Какие перспективы у BEM
Разработанная Яндексом в начале 2000-х гг., BEM (Block, Element, Modifier) получила широкое признание благодаря своей структурированности и удобству в использовании. В настоящее время BEM продолжает оставаться актуальной и востребованной, несмотря на появление других методологий и подходов к организации кода в веб-разработке.
Перспективы BEM
- Стандартизация и прозрачность:
- BEM способствует стандартизации именования классов в HTML и CSS, что улучшает читаемость и поддерживаемость кода. Это особенно важно для крупных проектов и команд разработчиков.
- Масштабируемость проектов:
- Благодаря четкому разделению на блоки, элементы и модификаторы, BEM облегчает масштабирование проектов. Разработчики могут легко добавлять новые компоненты и вариации без опасения конфликтов и пересечений стилей.
- Совместимость с другими технологиями:
- BEM хорошо интегрируется с другими технологиями и фреймворками, такими как React, Angular, Vue. js и другими, что позволяет использовать его принципы в современных SPA-приложениях.
- Поддержка сообществом:
- Веб-разработчики продолжают активно обмениваться опытом и лучшими практиками по применению BEM. Это поддерживает развитие методологии и способствует её адаптации к различным проектам и требованиям.
- Развитие инструментов поддержки:
- С появлением различных инструментов и плагинов для автоматизации создания BEM-классов, например, генераторов классов или расширений для редакторов кода, использование BEM становится еще более удобным и эффективным.
- Продолжение обучения и документации:
- Продолжается разработка и улучшение документации по 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 стилей.
