1 Введение в методологию BEM
1.1 Что такое BEM?
BEM (Block-Element-Modifier) — это методология именования классов в CSS, которая используется для более эффективного и удобного написания кода. Она разбивает наш интерфейс на небольшие блоки, каждый из которых имеет свой собственный набор свойств и стилей.
1.2 Зачем нужна методология BEM?
Цель BEM заключается в том, чтобы ускорить и упростить процесс создания и поддержки больших, сложных веб-приложений. Она позволяет разбить изначально очень сложный дизайн на небольшие части, которые легче понимать и поддерживать.
1.3 Какие задачи решает BEM?
- Структурирует HTML-разметку, делает ее более читаемой и понятной.
- Уменьшает вероятность возникновения ошибок при написании CSS-кода.
- Упрощает поддержку и модернизацию кода.
- Повышает скорость разработки.
2 Основные концепции и принципы BEM
2.1 Блок, элемент, модификатор
Концепции BEM основываются на том, что за каждым элементом интерфейса скрывается блок, который в свою очередь может содержать элементы и модификаторы.
Блок определяется как самостоятельный компонент, который имеет собственные свойства и функционал. Например, блок «header» содержит общую информацию и ссылки на различные страницы сайта.
Элемент является частью блока. Он отвечает за определенный функционал внутри блока. Например, элемент «logo» внутри блока «header».
Модификатор позволяет изменять поведение или внешний вид блока или элемента. Например, модификатор «active» для элемента «menu-item» внутри блока «menu» указывает, что элемент является активным на текущей странице.
2.2 Как правильно называть блоки, элементы и модификаторы
Названия блоков, элементов и модификаторов должны быть понятными и легко читаемыми, чтобы другие разработчики могли быстро понять, как работает ваш код.
- Название блока должно быть уникальным, коротким и легко читаемым.
- Название элемента должно быть написано внутри блока, разделено двойным тире.
- Название модификатора должно сообщать о том, что он делает с блоком или элементом.
- Блок: header
- Элемент: header__logo
- Модификатор: header__logo--small
2.3 Какие есть правила стилизации блоков и элементов
CSS-стили для блоков и элементов не должны быть привязаны к их положению на странице. Вместо этого они должны быть написаны на основе их назначения.
Для каждого блока и элемента должен быть свой собственный файл стилей, который легко поддерживать и изменять. Также важно трогать только свойства, относящиеся к текущему блоку или элементу, а не к соседним.
3 Преимущества использования BEM
3.1 Универсальность методологии
BEM используется не только в CSS, но и в HTML и JavaScript, что позволяет использовать ее во всем проекте. Это делает ее удобной для работы в команде.
3.2 Ясная структура и удобство редактирования кода
Использование BEM позволяет создавать чистый и понятный код. Это делает процесс работы с ним более удобным и эффективным, а также ускоряет процесс разработки и поддержки кода.
3.2 Возможность переиспользования блоков
Блоки и элементы, созданные с помощью BEM, могут быть легко переиспользованы в других проектах. Это позволяет повысить эффективность и скорость работы.
4 Примеры использования BEM
4.1 Создание простого блока
Для создания блока необходимо определить название и написать его в HTML-коде с помощью атрибута class. Например, создадим блок «menu»:
<nav class="menu">…</nav>
4.2 Создание элемента в блоке
Для создания элемента необходимо добавить двойное подчеркивание после имени блока и указать название элемента. Например, добавим элемент «item» в блок «menu»:
<nav class="menu">
<a class="menu__item" href="#">Link1</a>
<a class="menu__item" href="#">Link2</a>
<a class="menu__item" href="#">Link3</a>
</nav>
4.3 Пример использования модификатора
Модификаторы добавляются на основе элемента или блока и указываются с помощью двойного тире после названия элемента или блока. Например, добавим модификатор «active» для элемента «item» в блоке «menu»:
<nav class="menu">
<a class="menu__item--active" href="#">Link1</a>
<a class="menu__item" href="#">Link2</a>
<a class="menu__item" href="#">Link3</a>
</nav>
5 Заключение
Основные преимущества использования методологии BEM:
- Удобство разработки: BEM делает код читабельным и понятным, что упрощает поддержку и сопровождение проектов.
- Универсальность: этот подход может использоваться для различных архитектур веб-приложений, включая Single Page Applications (одностраничные сайты) и динамические сайты.
- Масштабируемость: возможность декомпозировать множественные компоненты веб-сайта на более мелкие части и переиспользовать их, что упрощает и ускоряет разработку и расширение проектов.
Одно лишь знание методологии BEM недостаточно, чтобы создавать эффективные web-проекты. Для успешной работы с BEM необходима грамотная организация команды, единый подход к именованию и структурированию элементов, высокая компетенция каждого участника процесса и, главное, ясное понимание принципов и целей методологии. В нашей компании наши профессиональные разработчики максимально используют BEM в своей работе, чтобы создавать проекты любой сложности.
