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

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

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

1. Блок: Отдельный компонент, который имеет смысл сам по себе (например, кнопка или форма).
2. Элемент: Часть блока, которая сама по себе не имеет значения и зависит от блока (например, значок кнопки).
3. Модификатор: Другая версия блока или элемента (например, кнопка другого цвета).

.block {}
.block__element {}
.block--modifier {}

Зачем использовать БЭМ?

Использование BEM поможет вам избежать беспорядочного и запутанного CSS. Это дает несколько преимуществ:

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

Как использовать БЭМ: примеры

Пример 1: Простая кнопка

Давайте начнем с базового блока кнопок и посмотрим, как работает БЭМ.

HTML:

  Submit

CSS:

.button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
}

.button--primary {
  background-color: blue;
}

Объяснение:

• button — блок, представляющий стиль основной кнопки.
• button--primary — это модификатор, применяющий синий фон к этой конкретной версии кнопки.

Пример 2: Компонент карты

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

HTML:

  
Title
  
This is a description.

CSS:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

Объяснение:

• card — это блок, представляющий компонент карты.
• card__title и card__description — это элементы, отдельные части карточки.
• card--small — это модификатор, уменьшающий отступы для уменьшенной версии карты.

Плюсы и минусы БЭМ

Плюсы:

1. Организованность и единообразие: Помогает поддерживать чистоту и хорошо структурированность CSS.
2. Избегает конфликтов CSS: Уменьшает риск влияния стилей одного компонента на другой.
3. Повторное использование: Блоки и элементы можно использовать в разных местах проекта.
4. Простота обслуживания: Упрощает обновление CSS и управление им даже по мере роста вашего проекта.

Минусы:

1. Длинные имена классов: Имена классов БЭМ могут быть довольно длинными, что на первый взгляд может показаться ошеломляющим.
2. Кривая обучения: Чтобы привыкнуть к структуре БЭМ, требуется некоторое время, особенно если вы новичок в CSS.

Почему БЭМ важен?

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

Если вам нужен последовательный и модульный способ написания CSS, BEM — отличный выбор. Обучение может занять некоторое время, но в долгосрочной перспективе это сэкономит вам время и сделает ваш CSS более удобен в обслуживании.

Заключение

Соглашение об именах BEM — отличный способ сохранить организованность и масштабируемость вашего CSS. Это помогает избежать конфликтов, делает ваш код более удобным в сопровождении и способствует повторному использованию компонентов. Хотя поначалу это может показаться сложным из-за длинных названий классов и продолжительности обучения, преимущества намного перевешивают недостатки. Если вы хотите писать более чистый CSS и улучшить совместную работу в своих проектах, попробуйте BEM!

Следуйте за мной, чтобы получать больше обновлений!

Надеюсь, эта статья оказалась полезной для понимания соглашений об именах CSS BEM. Если вы хотите оставаться в курсе подобных статей, советов и идей по веб-разработке, обязательно подписывайтесь на меня. Не стесняйтесь обращаться, если у вас есть какие-либо вопросы или предложения. Мне бы хотелось услышать ваше мнение!