BEM Cheat Sheet

Блок	независимый элемент страницы со своим назначением (шапка, навигация, пост): `.page-block`
Элемент	часть блока, имеющая смысл только внутри него (пункт меню, заголовок, ссылка), отделяется двойным подчеркиванием: `.page-block__element`
Модификатор	Модификация внешнего вида/поведения блока или элемента, отделяется двойным тире: `.page-block--modificator` / `.page-block__element--modificator`

Использовать только селекторы по классам

Селекторы не более чем из двух элементов (

.class .children-class

)

Не использовать глобальные стили (исключение: normalize и параметры шрифтов)

Обёртка: .wrapper

Название класса отображает назначение, а не вид

Не задавать размеры блоку (только модификатору)

Элемент может иметь классы и блока и элемента

Первым в атрибутах тэга идёт class

Названия классов в атрибуте разделяют двойным пробелом

Как определить элемент или блок: может ли это понадобится вне родительского элемента? (Если да - Блок, если нет - Элемент)

Классы-модификаторы не используются без классов, которые они модицифцируют:

<div class="header  header--big">

Download the BEM Cheat Sheet

1 Page

Add a Comment

More Cheat Sheets by Yur375

Web Console Cheat Sheet

BEM Cheat Sheet by Yur375