Написание более чистого CSS кода с помощью БЭМ

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

Что такое БЭМ

БЭМ — это соглашение об именах для классов HTML и CSS, которое помогает разработчикам создавать поддерживаемый и организованный код. Он обеспечивает структурированный формат для именования классов HTML и CSS, что приводит к разбиению нашей веб-страницы на более мелкие компоненты (компоненты блоков, элементов и модификаторов). Он был создан в средине 2000-х разработчиками, работавшими над сложным пользовательским интерфейсом поисковой системы Яндекс. Разработчики изо всех силы пытались поддерживать свою быстрорастущую кодовую базу CSS. Им был нужен структурированный подход к соглашениям об именах в HTML и CSS, чтобы сделать кодовую базу более удобной в сопровождении, масштабируемой и пригодной для повторного использования. Поэкспериментировав с несколькими методами, они остановились на БЭМ, целью которого является создание иерархии компонентов на веб-странице. В 2010 году они опубликовали свой подход в блоге, который стал популярным в сообществе веб-разработчиков. Сегодня БЭМ широко используется в качестве соглашения об именах для HTML и CSS такими компаниями, как Google, Airbnb и GitHub, и породило множество инструментов и ресурсов, помогающих разработчикам более эффективно внедрять методологию.

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

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

Прежде чем продолжить чтение, примите это практическое объяснение как основную цель БЭМ. Например, если ваш друг или другой разработчик посмотрит ваш CSS код, они должны легко понять его. Это означает, что ваш код должен быть читабельным, ясным и лаконичным. Другими словами, ваш код должен иметь согласованный стиль, который сможет легко понять ваш друг или другой разработчик.

Когда нужно использовать БЭМ

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

• Крупномасштабные проекты: Мы можем внедрить БЭМ, когда у нас есть проект с большой кодовой базой, в которой участвует несколько разработчиков, создающих разные части проекта. Используя БЭМ, мы можем легко поддерживать проект и снизить риск ошибок и конфликтов кода.
• Проекты ориентированные на доступность: Методология БЭМ делает веб-сайт более доступным для пользователей, когда проекты будут отдавать приоритет поисковой оптимизации (SEO). Благодаря БЭМ веб-сайт станет более доступным для пользователей, если они используют технологию, определяющую содержимое веб-страницы.

Разбивка ключевого слова БЭМ

БЭМ — это ключевое слово, представляющее три сущности:

Блок

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

Пример метода именования блоков:

.btn {
  color: red;
  font-size: 15px;
}

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

При применении блочного метода при установке имени класса, мы должны помнить, что имя должно быть описательным и показывать функцию или назначение блока. Это единственная цель соглашения об именах блоков. От вас не требуется учитывать другие особенности (например, внешний вид — цвет) блочного элемента при создании имени класса. Сущность модификатора имеет дело с внешним видом, поэтому никогда не пытайтесь делать это:

.blue-btn {
  color: blue;
  font-size: 18px;
}

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

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

Например, блок со списком товаров будет называться product-list:

.product-list {
  list-style: none;
  font-size: 14px;
}

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

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

Следование, приведённым выше рекомендациям, гарантирует, что интеграция блочной сущности при определении классов для разметки или CSS будет бесшовным процессом.

Элемент

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

Примечание: у элемента может быть только один родитель (только блок, к которому он привязан), и мы не можем использовать его вне этого блока. Возьмём пример блока — header. Внутри блока header есть такие вещи, как логотипы, ссылки и кнопки, встроенные в него. Эти вещи, найденные в блоке заголовка, являются элементами. Теперь, как нам создать имя элемента? Имя элемента начинается с имени родителя (имени блока), за которым следует двойной символ подчёркивания (__), и заканчивается именем элемента.

CSS код:

/* header - это имя блока, поэтому header идёт первым */
.header__logo {

}

HTML код:

<div class="header">
  <img class="header__logo" alt="logo"/>
</div>

В приведённом выше примере кода родительский элемент (div) с именем блока header. Внутри расположен элемент изображения с именем элемента header__logo.

Вложение элементов в один и тот же блок

Вложение элементов — это встраивание элемента внутрь другого элемента в том же блоке. Используя пример блока header с элементом nav внутри него, содержащим элементы menu-item (тэг ul — неупорядоченный список), мы можем сказать, что пункт меню вложен в элемент nav.

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

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

Вот пример кода для объяснения теории вложенности элементов:

<div class="header">
  <img class="header__logo" alt="logo"/>
  <nav class="header__link">
<!--     menu-list -->
    <ul class="header__menu-list"></ul>
  </nav>
</div>

Из кода можно сделать вывод, что по-прежнему реализуется стандартное соглашение об именах для определения имён элементов, даже когда элементы вложены друг в друга. Мы могли бы написать код выше следующим образом:

<div class="header">
  <img class="header__logo" alt="logo"/>
  <nav class="header__link">
<!--     menu-list -->
    <ul class="header__link__menu-list"></ul>
  </nav>
</div>

При определении имени элемента для вложенного элемента вы не должны ставить перед ним префикс имени родительского элемента (в данном случае header__link), что приводит к следующему результату header__link__menu-list. Просто добавьте к нему префикс имени блока (header), за которым следует двойное подчёркивание, затем имя элемента, что приводит к такому результату — header__menu-list (для данного примера).

Вот некоторые ключевые моменты, которые следует учитывать при использовании сущности Элемент:

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

Принятие во внимание этих советов позволит адаптироваться к стандартному использованию сущности Элемент в методологии БЭМ.

Модификатор

Он определяет внешний вид, состояние или поведение Блока, или Элемента независимо (без создания нового Блока или Элемента с нуля).

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

Вот синтаксис:

/* при нацеливании на Блок */
.block-name-modifier-name {
/*   стили задаются здесь */
}

/* при нацеливании на Элемент */
.block-name__element-name-modifier-name {
/*   стили задаются здесь */
}

Мы добавляем Модификаторы к Блоками или Элементам, добавляя их имя в качестве суффикса к классу Блока или Элемента, разделённого двумя символами подчёркивания.

Обратите внимание: модификаторы необязательны, но вы можете использовать их из-за эффективности при создании визуальных стилей и добавлении вариаций к Элементам и Блокам. Некоторые примеры имён модификаторов disabled, primary и т.д.

Например, в контейнере div есть две кнопки с одинаковыми стилями, за исключением их состояния (active or disabled). Для этого мы используем Блок с названием card Содержащий Элемент с названием buttons. Оттуда мы применяем Модификатор к buttons, которым мы хотим присвоить состояние. HTML-код:

<div class="card">
  <div class="card__buttons">
    <button class="card__buttons–active"></button>
    <button class="card__buttons–disabled"></button>
  </div>
</div>

В приведённом выше коде у нас есть два модификатора с именами card__buttons–active и card__buttons–disabled соответственно.

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

<div class="card">
  <div class="card__buttons">
    <button class="card__buttons–active"></button>
    <button class="card__buttons–disabled"></button>
  </div>
</div>

Даже если человек, не являющийся разработчиком, посмотрит на этот код, он может легко предположить, что мы стилизуем кнопки на карточке и что назначили одну из них активной active(состояние показывающее, что на неё уже кликнули), а другую — отключённой disabled (состояние при котором кнопка не нажимается).

Модификаторы необязательны, но если вы решите их использовать, вам нужно отметить следующее:

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

Практический аспект

В этом разделе мы рассмотрим реальный пример, демонстрирующий методологию БЭМ.

Примером для этого сегмента является структура карты, созданная с помощью HTML и CSS — изображённая выше.

Из изображения мы можем вынести следующие сущности:

• Блок: Карта сама является Блоком; его также можно назвать родителем всех других документов, поскольку в него встроены другие элементы;
• Элемент: Здесь мы можем указать, что у нас есть только два прямых элемента, компонент заголовка и компонент кнопки. Но на самом деле у нас есть пять элементов — элемент заголовка с тремя вложенными в него элементами (элемент изображения, элемент заголовка и элемент описания) и элемент кнопки, в который вложено два фактических элемента кнопки.
• Модификатор: Как я уже говорил ранее, модификаторы используются вместо настройки внешнего вида и настройки стилей — как следует из названия, они помогают изменять стили. В карточке выше был создан модификатор, отключающий одну из кнопок, т.е. делающий кнопку неактивной и не нажимаемой.

Вот код для создания карты с изображения выше; взгляните на него поглубже — на HTML и CSS код. Посмотрите как я реализовал БЭМ при определении имён классов в семантическом HTML и как я структурировал классы в CSS, следующие друг за другом сверху вниз (это очень важно, старайтесь всегда размещать стиль сверху вниз последовательно).

See the Pen

Ресурсы

Для более глубокого понимания обсуждаемой темы вы можете ознакомиться с информацией на этих веб-сайтах:

• Official BEM Website
• BEM 101

Заключение

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

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

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

Я надеюсь, что вы нашли эту статью информативной и приятной. Спасибо за чтение.