Какую задачу решает БЭМ нейминг
Если давать имена CSS классам не задумываясь, то вскоре можно обнаружить в проекте такие имена как text-1 , text-2 и text-3 . Или например button-1 , button-2 и так далее. Чем больше растет проект и чем чаще в проекте встречаются похожие, но с небольшими различиями элементы, тем сложнее придумать им название так чтобы в названиях CSS классов можно было легко ориентироваться. БЭМ нейминг решает эту задачу.
Сразу отмечу что методология это рекомендации к тому как придумывать CSS имена. Нарушение методологии не приведет к технической ошибке, однако ухудшит читаемость вашего кода другими специалистами верстальщиками.
Идея БЭМ нейминга состоит в том чтобы с помощью имен CSS классов определить независимые блоки, обозначить их элементы и определить возможные модификации. Рассмотрим подробнее.
Примечание
В этой статье описывается альтернативный синтаксис БЭМ нейминга, который называется Two Dashes. Этот стиль визуально более выразителен и легче воспринимается для чтения. Описание стиля Two Dashes в официальной документации.
Правила формирования имен классов в БЭМ нейминге
- Имена записываются латиницей в нижнем регистре.
- В имени классов используются полные слова, без сокращений.
- Для разделения слов в именах БЭМ-сущностей используется дефис (-).
- Имя элемента отделяется от имени блока двумя подчеркиваниями (__).
- Модификаторы отделяются от имения блока или элемента двумя дефисами (--).
Пример именования по БЭМ неймингу
- .block ( Блок )
- .block__element ( Элемент )
- .block--modifier ( Модификатор для Блока )
- .block__element--modifier ( Модификатор для Элемента )
Основные понятия БЭМ нейминга
Блоки
Блок - это независимый самодостаточный элемент страницы. Простой тест на то можно ли определить элемент как блок. Блок можно вырвать с его места расположения на странице и разместить на абсолютно чистую страницу, при этом он не потеряет своей актуальности, будет понятно о чем он и какой контент в нем представлен, он не утратит своего смысла.
Классическим вариантом блока является карточка товара, карточка со статьей, отдельно секция с товаром или со статьей, шапка, подвал, и другие секции или целостные элементы страницы.
Имя для блока описывается одним или несколькими словами. Несколько слов в имени блока разделяются дефисом - .
Имя блока пишется строчными буквами, не имеет заглавных. В имени используются полные слова, без сокращений.
Неправильно:
- product_card
- productCard
- ProductCaRD
- s-products
- btnPrimary
- Card
Правильно:
- product-card
- section-products
- header
- footer
- button
- card
Элементы
Элемент - это составная часть блока. Элемент является частью блока и находится внутри него.
Если мы рассмотрим блок карточки с товаром, то его внутренние составные части это и есть элементы данного блока.
Например элементами карточки с товаром будут:
- заголовок карточки,
- цена,
- изображение товара,
- описание товара,
- кнопка покупки.
Элементы всегда принадлежать какому-либо блоку. Не бывает независимых элементов. Принадлежность элемента к блоку описывается двойным подчеркиванием __ . В имени элемента всегда вначале указывается имя блока к которому он принадлежит, далее после двойного подчеркивания идет имя элемента. block__element
Рассмотрим пример с элементами внутри карточки.
Неправильно:
- card-title
- cardPrice
- card_description
- card--button
Правильно:
- card__title
- card__price
- card__description
- card__button
Модификаторы
Модификатор - это дополнительный класс который добавляется к html тегу с блоком или элементом. Модификатор - модифицирует (изменяет) отображение блока на странице. Модификатор не может использоваться на теге отдельно от блока или элемента.
Имя класса модификатора содержит в себе имя блока или элемента для которого он создается, далее идет разделитель в виде двух дефисов --, и в конце имя модификатора.
Например у нас есть блок карточки товара card, и нужно сделать модификатор для карточки товара по распродаже, который будет менять ее фон. Имя такого модификатора будет следующее: card--sale
Давайте придумаем модификатор для элемента. Например в карточке товара есть его цена. Цена это элемент блока card и имеет класс card__price . Модификатором для такого элемента будет класс card__price--sale, в котором мы сначала повторяем имя элемента, далее после двойного дефиса указываем имя модификатора.
Неправильные имена модификаторов:
- card_sale
- card-sale
- cardSale
- sale
Правильные имена модификаторов:
- card--sale
- cart__price--sale
Использование модификаторов
Модификатор всегда применяется к блоку или элементу. Нельзя использовать на теге только модификатор, без класса блока или элемента.
Неправильное использование модификаторов:
<div class="card__price--sale">12000 РУБ</div>
</div>
Правильное использование модификаторов:
<div class="card__price card__price--sale">12000 РУБ</div>
</div>
0 comments