Как правильно сделать структуру по БЭМ?

от
prokoding.ru > HTML > Как правильно сделать структуру по БЭМ?

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

  1. Определение блоков:
  • Блок (Block) - это независимый контейнер, который выполняет конкретную функцию на странице и является основной единицей верстки. Например, блок "header" для верхней части страницы.
  • Каждый блок определяется через класс CSS, поэтому класс блока должен быть уникальным на всей странице.
  1. Создание элементов:
  • Элемент (Element) - это часть блока, которая не может существовать отдельно от него и выполнена в его контексте. Например, элемент "logo" в блоке "header".
  • Элементы определяются с использованием двойного подчеркивания ().
  1. Применение модификаторов:
  • Модификатор (Modifier) - это состояние или вариация блока или элемента, которое меняет его внешний вид, поведение или состояние. Например, модификатор "dark" для блока "header", чтобы сделать его темным.
  • Модификаторы определяются с использованием двойного тире (--).

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

<div class="block">
  <div class="block__element"></div>
  <div class="block__element block__element--modifier"></div>
</div>

В приведенном выше примере у нас есть блок с классом "block", который содержит два элемента: "blockelement" и "blockelement--modifier". Они являются частями блока и описываются соответствующими классами CSS.

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

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

Надеюсь, это поможет вам правильно сделать структуру по БЭМ и создать удобный и модульный код.