Всем привет, на связи Лоджик!

В этой статье мы не просто рассмотрим, что из себя представляет методология БЭМ (Блок, Элемент, Модификатор), но и разберем, почему эта методология стала столь популярной среди веб-разработчиков. Мы погрузимся в основные принципы БЭМ, изучим его преимущества, а также рассмотрим лучшие практики для внедрения этой методологии в ваши проекты.

Независимо от того, являетесь ли вы владельцем бизнеса, стремящимся улучшить качество веб-разработки, или техническим специалистом, ищущим новые подходы к структурированию кода, данная статья поможет вам понять, как БЭМ может стать ключевым элементом вашего успеха!

Что такое БЭМ?

БЭМ (Блок, Элемент, Модификатор) — это методология веб-разработки, разработанная компанией Яндекс, которая направлена на улучшение масштабируемости и поддержки кода. БЭМ делит пользовательский интерфейс на независимые блоки, что упрощает разработку и повторное использование компонентов без необходимости дублирования кода.

Основные принципы БЭМ

БЭМ основывается на трех основных концепциях:

• Блок (Block). Это независимый компонент страницы, который представляет собой самостоятельную и полностью функциональную часть интерфейса, которую можно повторно использовать в различных частях сайта. Примеры таких блоков: кнопки, формы, меню и другие элементы интерфейса.
• Элемент (Element). Это составная часть блока, выполняющая определенную функцию внутри блока, но не способная существовать отдельно от него. Например, кнопка, которая находится внутри формы, является элементом данной формы и обозначается как форма__кнопка. Элементы создаются для выполнения конкретных задач внутри блоков и зависят от структуры блока, в котором они находятся.
• Модификатор (Modifier). Это свойство, которое изменяет внешний вид или поведение блока или элемента. Например, модификатор может сделать кнопку активной или изменить цвет фона блока. Пример: кнопка_активная. Модификаторы позволяют легко изменять состояние или внешний вид блоков и элементов без необходимости изменять их основную структуру. Это упрощает поддержку и обновление интерфейса, поскольку изменения могут быть внесены через модификаторы, а не через изменение базового кода блоков и элементов.

Преимущества использования БЭМ

• Модульность. С помощью БЭМ разработчики могут создавать независимые, самодостаточные компоненты, которые можно легко повторно использовать и комбинировать в различных частях проекта. Это значительно упрощает процесс разработки, так как один и тот же блок, например кнопка или форма, может быть использован в разных местах страницы без необходимости переписывать код. Модульность также способствует более эффективному тестированию и отладке, поскольку каждый блок может быть протестирован отдельно.
• Поддерживаемость. Благодаря четкой и логически обоснованной структуре именования, код, написанный с использованием методологии БЭМ, становится более читаемым и легко поддерживаемым. Это особенно важно для крупных проектов, где количество компонентов и их взаимодействий может быть значительным. Строгие правила именования блоков, элементов и модификаторов помогают разработчикам быстро ориентироваться в коде, что облегчает процесс его обновления и доработки. Поддерживаемость кода также играет ключевую роль в командной работе, так как новый член команды может быстро понять структуру и логику существующего проекта, что сокращает время на адаптацию и обучение.
• Гибкость. Возможность легко комбинировать и настраивать блоки и элементы делает разработку с использованием БЭМ более гибкой и адаптируемой под различные требования и задачи. Разработчики могут создавать разнообразные пользовательские интерфейсы, комбинируя базовые блоки и добавляя к ним нужные элементы и модификаторы. Такая гибкость позволяет быстро вносить изменения в дизайн и функциональность интерфейса без необходимости переписывать значительные части кода. Кроме того, благодаря модификаторам можно легко изменять состояние или внешний вид компонентов в зависимости от текущих задач и требований проекта, что делает методологию БЭМ идеальной для разработки динамичных и интерактивных веб-приложений.

Недостатки методологии БЭМ

Методология БЭМ обладает множеством преимуществ, однако, как и у любого подхода, у нее есть и свои недостатки. Вот некоторые из них:

• Сложность именования. Имена классов в БЭМ могут становиться очень длинными и громоздкими, особенно при использовании сложных структур. Это может привести к затруднениям при написании и чтении кода, особенно для новичков или разработчиков, не знакомых с БЭМ.
• Трудности с интеграцией в существующие проекты. Внедрение БЭМ в уже существующий проект может быть сложным и трудоемким процессом, требующим значительных усилий на рефакторинг кода и изменение структуры стилей.
• Проблемы с совместимостью. БЭМ не всегда легко интегрируется с некоторыми инструментами и библиотеками, которые имеют свои собственные подходы к именованию и структуре классов. Это может потребовать дополнительных усилий для настройки и согласования стилей.
• Переусложнение простых задач. Для небольших проектов или простых интерфейсов использование БЭМ может быть излишне сложным и громоздким. В таких случаях преимущества модульности и масштабируемости могут не оправдывать затраченных усилий.

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

Примеры использования БЭМ на практике

Важной частью БЭМ является именование классов, так что давайте разберем правила формирования имен.

Главные правила

• Имена записываются латиницей в нижнем регистре.
• Для разделения слов в именах используется дефис (”-”).
• Имя блока задает пространство имен для его элементов и модификаторов.
• Имя элемента отделяется от имени блока двумя подчеркиваниями (”__”).
• Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (”_”).
• Значение модификатора отделяется от имени модификатора одним подчеркиванием (”_”).

Имя блока

Самое простое — это имя блока, описывающее его смысл. Пример: menu.

HTML

<div class="menu">...</div>

CSS

.menu { /* Стили */ }

Имя элемента

Имя элемента начинается с имени блока, в котором он состоит, двух подчеркиваний и описания элемента. Пример: menu__item.

Важно! Имена одинаковых элементов одного и того же блока совпадают. Например, все пункты в блоке меню называются menu__item.

HTML

<div class="menu">
  ...
  <span class="menu__item"></span>
</div>

CSS

.menu__item { /* Стили */ }

Имя модификатора блока

Начинаются с названия блока, затем нижнее подчеркивание и модификатор. Пример: menu_hidden, menu_christmas.

HTML

<div class="menu menu_hidden">...</div>
<div class="menu menu_christmas">...</div>

CSS

.menu_hidden { /* Стили */ }
.menu_christmas { /* Стили */ }

Имя модификатора элемента

Состоит из названия блока, двух подчеркиваний, элемента, подчеркивания и модификатора. Пример: menu__item_active.

HTML

<div class="menu">
    ...
    <span class="menu__item menu__item_active">...</span>
</div>

CSS

.menu__item_active { /* Стили */ }

Пример

Представим, что у нас есть HTML-код кнопки. С использованием БЭМ код будет выглядеть следующим образом:

<a class="btn btn_big btn_primary_color" href="#" title="Title">
  <span class="btn__price">$3.99</span>
  <span class="btn__text">Product</span>
</a>

И соответствующий CSS-код:

.btn__price { /* Стили */ }
.btn__text { /* Стили */ }
.btn_big { /* Стили */ }
.btn_primary_color { /* Стили */ }

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

Заметим, что описанные правила — это классическая схема именования классов. Существуют также альтернативаные стили, с которыми мы советуем ознакомиться. К примеру, есть модификация именования под CamelCase, где класс будет называться по схеме blockName__elemName. Если какая-то из альтернатив больше подходит под ваш стиль кода, то используйте его. Можно даже создать собственную схему именования БЭМ-сущностей, но тогда на вас будет лежать ответственность за написание документации к вашему стилю и онбординг других программистов из вашей команды, что займет достаточно времени и усилий.

Лучшие практики и советы по внедрению БЭМ

• Используйте понятные и описательные имена. Имена блоков, элементов и модификаторов должны быть осмысленными и отражать их назначение.
• Избегайте вложенности. Элементы должны быть частью блока, но не других элементов. Это обеспечивает простоту и предсказуемость структуры кода.
• Комбинируйте с препроцессорами. Использование препроцессоров, таких как SASS или LESS, в сочетании с БЭМ, может значительно упростить управление стилями и сделать код еще более модульным.

Заключение

БЭМ методология является мощным инструментом для создания масштабируемого и поддерживаемого кода. Она помогает структурировать CSS и HTML, делает код читаемым и легко поддерживаемым. Внедрение БЭМ может значительно улучшить процесс разработки и работу в команде, особенно в крупных проектах.