Структура по БЭМ (Блок-Элемент-Модификатор) является методологией организации кода в HTML и CSS, которая позволяет создавать модульные и масштабируемые проекты.
Вот подробное объяснение, как правильно построить структуру по БЭМ.
1. Определение блоков:
- Блок (Block) - это независимый контейнер, который выполняет конкретную функцию на странице и является основной единицей верстки. Например, блок "header" для верхней части страницы.
- Каждый блок определяется через класс CSS, поэтому класс блока должен быть уникальным на всей странице.
2. Создание элементов:
- Элемент (Element) - это часть блока, которая не может существовать отдельно от него и выполнена в его контексте. Например, элемент "logo" в блоке "header".
- Элементы определяются с использованием двойного подчеркивания (__).
3. Применение модификаторов:
- Модификатор (Modifier) - это состояние или вариация блока или элемента, которое меняет его внешний вид, поведение или состояние. Например, модификатор "dark" для блока "header", чтобы сделать его темным.
- Модификаторы определяются с использованием двойного тире (--).
Итак, структура по БЭМ может выглядеть следующим образом:
<div class="block"> <div class="block__element"></div> <div class="block__element block__element--modifier"></div> </div>
В приведенном выше примере у нас есть блок с классом "block", который содержит два элемента: "block__element" и "block__element--modifier". Они являются частями блока и описываются соответствующими классами CSS.
Когда вы используете БЭМ, важно следовать следующим рекомендациям:
- Используйте осмысленные имена для блоков, элементов и модификаторов. Они должны быть описательными и понятными.
- Структурируйте код вашего проекта, группируя блоки и их элементы в соответствующих папках или файле CSS.
- Пишите независимые и переиспользуемые блоки, чтобы упростить разработку и поддержку проекта.
- Не используйте стили внутри элементов или модификаторов, относящихся к другим блокам. Блоки должны быть полностью независимыми.
Надеюсь, это поможет вам правильно сделать структуру по БЭМ и создать удобный и модульный код.