Основные принципы методолгоии БЭМ (модификация Николаса Галлахера)
|
Блок
|
независимый элемент страницы со своим назначением (шапка, навигация, пост):
.page-block |
|
Элемент
|
часть блока, имеющая смысл только внутри него (пункт меню, заголовок, ссылка), отделяется двойным подчеркиванием:
.page-block__element |
|
Модификатор
|
Модификация внешнего вида/поведения блока или элемента, отделяется двойным тире:
.page-block--modificator / .page-block__element--modificator |
|
Использовать только селекторы по классам
|
|
Селекторы не более чем из двух элементов (
.class .children-class) |
|
Не использовать глобальные стили (исключение: normalize и параметры шрифтов)
|
|
Обёртка: .wrapper
|
|
Название класса отображает назначение, а не вид
|
|
Не задавать размеры блоку (только модификатору)
|
|
Элемент может иметь классы и блока и элемента
|
|
Первым в атрибутах тэга идёт class
|
|
Названия классов в атрибуте разделяют двойным пробелом
|
|
Как определить элемент или блок: может ли это понадобится вне родительского элемента? (Если да - Блок, если нет - Элемент)
|
|
Классы-модификаторы не используются без классов, которые они модицифцируют:
<div class="header header--big"> |
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
