БЭМ нейминг для HTML верстки сайтов. Полная инструкция

БЭМ неминг - это методология именования CSS классов. Расшифровывается как: Блок, Элемент, Модификатор. Придуман в Яндексе, чтобы решить проблему именования CSS классов в больших проектах. 

Какую задачу решает БЭМ нейминг

Если давать имена CSS классам не задумываясь, то вскоре можно обнаружить в проекте такие имена как  text-1 ,  text-2  и  text-3 . Или например  button-1  ,  button-2  и так далее. Чем больше растет проект и чем чаще в проекте встречаются похожие, но с небольшими различиями элементы, тем сложнее придумать им название так чтобы в названиях CSS классов можно было легко ориентироваться. БЭМ нейминг решает эту задачу.

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

Идея БЭМ нейминга состоит в том чтобы с помощью имен CSS классов определить независимые блоки, обозначить их элементы и определить возможные модификации. Рассмотрим подробнее.


Примечание

В этой статье описывается альтернативный синтаксис БЭМ нейминга, который называется Two Dashes. Этот стиль визуально более выразителен и легче воспринимается для чтения. Описание стиля Two Dashes в официальной документации.


Правила формирования имен классов в БЭМ нейминге

  • Имена записываются латиницей в нижнем регистре.
  • В имени классов используются полные слова, без сокращений.
  • Для разделения слов в именах БЭМ-сущностей используется дефис (-).
  • Имя элемента отделяется от имени блока двумя подчеркиваниями (__).
  • Модификаторы отделяются от имения блока или элемента двумя дефисами (--).


Пример именования по БЭМ неймингу

  1. .block   ( Блок )
  2. .block__element   ( Элемент )
  3. .block--modifier   ( Модификатор для Блока )
  4. .block__element--modifier   ( Модификатор для Элемента )


Основные понятия БЭМ нейминга

Блоки

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

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

Имя для блока описывается одним или несколькими словами. Несколько слов в имени блока разделяются дефисом - .

Имя блока пишется строчными буквами, не имеет заглавных. В имени используются полные слова, без сокращений.

Неправильно:

  1. product_card
  2. productCard
  3. ProductCaRD
  4. s-products
  5. btnPrimary
  6. Card

Правильно:

  1. product-card
  2. section-products
  3. header
  4. footer
  5. button
  6. card


Элементы

Элемент - это составная часть блока. Элемент является частью блока и находится внутри него.

Если мы рассмотрим блок карточки с товаром, то его внутренние составные части это и есть элементы данного блока. 

Например элементами карточки с товаром будут: 

  • заголовок карточки, 
  • цена, 
  • изображение товара, 
  • описание товара, 
  • кнопка покупки.


Элементы всегда принадлежать какому-либо блоку. Не бывает независимых элементов. Принадлежность элемента к блоку описывается двойным подчеркиванием __ . В имени элемента всегда вначале указывается имя блока к которому он принадлежит, далее после двойного подчеркивания идет имя элемента. block__element

Рассмотрим пример с элементами внутри карточки.

Неправильно:

  1. card-title
  2. cardPrice
  3. card_description
  4. card--button

Правильно:

  1. card__title
  2. card__price
  3. card__description
  4. card__button


Модификаторы

Модификатор - это дополнительный класс который добавляется к html тегу с блоком или элементом. Модификатор - модифицирует (изменяет) отображение блока на странице. Модификатор не может использоваться на теге отдельно от блока или элемента.

Имя класса модификатора содержит в себе имя блока или элемента для которого он создается, далее идет разделитель в виде двух дефисов --, и в конце имя модификатора.

Например у нас есть блок карточки товара card, и нужно сделать модификатор для карточки товара по распродаже, который будет менять ее фон. Имя такого модификатора будет следующее: card--sale

Давайте придумаем модификатор для элемента. Например в карточке товара есть его цена. Цена это элемент блока card и имеет класс card__price . Модификатором для такого элемента будет класс card__price--sale, в котором мы сначала повторяем имя элемента, далее после двойного дефиса указываем имя модификатора.

Неправильные имена модификаторов:

  1. card_sale
  2. card-sale
  3. cardSale
  4. sale

Правильные имена модификаторов:

  1. card--sale
  2. cart__price--sale


Использование модификаторов

Модификатор всегда применяется к блоку или элементу. Нельзя использовать на теге только модификатор, без класса блока или элемента.

Неправильное использование модификаторов:

<div class="card--sale">
<div class="card__price--sale">12000 РУБ</div>
</div>

Правильное использование модификаторов:

<div class="card card--sale">
<div class="card__price card__price--sale">12000 РУБ</div>
</div>



Категории: