Именование классов CSS: Конвенция именования BEM

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

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

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна, лаконична и, самое главное, безжалостно последовательна, она автоматически становится более интуитивно понятной для сопровождения.

Перефразируя популярную цитату...

Плохой код - это как шутка. Если вам приходится его объяснять, значит, он, скорее всего, плохой.

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

В CSS существует несколько руководств по стилям. В этой статье мы остановимся на самом популярном соглашении об именовании в CSS - соглашении об именовании BEM.

Что такое соглашение об именовании BEM

Конвенция именования BEM расшифровывается как Block, Element и Modifier.

Возможно, вы сталкивались с ним, не зная об этом. Если вы из тех, кто изучает шаблоны из Envato (или вашего любимого центра шаблонов), вы наверняка сталкивались с CSS-классами и идентификаторами с названиями .button--primary, .button__title, #pinnedBlogPost__title, .is--bold. Так вот, это и есть соглашение об именовании BEM.

Чтобы согреться идеей конвенции BEM, мы можем представить себе различные города в соответствующих странах, на нескольких континентах мира. Например, Лондон находится в Соединенном Королевстве; Соединенное Королевство находится в Европе. В этом отношении мы можем сказать Europe__UnitedKingdom--London.

Давайте разберем это подробнее.

Блок

Как мы видели в примере выше, первая часть представляет собой высокоуровневый контейнер. Это может быть что угодно, от навигационного меню, контейнера для записей блога, формы входа в систему до чего-то более простого, например кнопки. Хорошие примеры включают: .card, .blog, .post.
Они по желанию снабжаются префиксами пространств имен (о которых мы поговорим позже в этой статье)

Элемент

Внутри блока находится следующий компонент конвенции BEM. Единичная единица в контейнере - это элемент. Это может быть заголовок карточки блога, текст кнопки, ссылки навигационного меню. Обычно они имеют префикс из двух знаков подчеркивания. Примеры включают: .card__title, .nav__link, .nav__item, #userProfile__name.

Модификатор

Последняя часть представляет собой состояние или вариацию, в которую может трансформироваться элемент - полужирный, большой, маленький, подчеркивание и т.д. Обычно они имеют префикс из двух тире и выглядят следующим образом: .card__title--bold, .is--bold, .is--underlined.

Внедрив вышеупомянутое соглашение в нашу кодовую базу CSS, мы получаем следующие преимущества:

• Улучшенный стандарт кодирования
• Легкая читаемость
• Улучшенная сопровождаемость
• Лучшая структура
• Более многократно используемый код

Пространства имен

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

• c-: Компонент c-card__header ,c-card--large
• has-,is-: Утилита is-big, has-slideAnimation
• js-: Действия js-start , js-exit
• o-: Объект o-container , o-container--fluid
• qa-: Тестирование qa-error , qa-hide
• s-: Область s-баннер , s-джамботрон
• t-: Тема t-темный , t-светлый
• u-: Утилита u-clearfix , u-align-center

Вы нашли эту статью полезной? Получайте еженедельные статьи и советы по кодированию, подписавшись на мою рассылку.

Подписаться * Томисин Абиодун