Cheatography
https://cheatography.com
Основные принципы методолгоии БЭМ (модификация Николаса Галлахера)
Части БЭМ
Блок |
независимый элемент страницы со своим назначением (шапка, навигация, пост): .page-block
|
Элемент |
часть блока, имеющая смысл только внутри него (пункт меню, заголовок, ссылка), отделяется двойным подчеркиванием: .page-block__element
|
Модификатор |
Модификация внешнего вида/поведения блока или элемента, отделяется двойным тире: .page-block--modificator
/ .page-block__element--modificator
|
|
|
Основные принципы
Использовать только селекторы по классам |
Селекторы не более чем из двух элементов ( .class .children-class
) |
Не использовать глобальные стили (исключение: normalize и параметры шрифтов) |
Обёртка: .wrapper |
Название класса отображает назначение, а не вид |
Не задавать размеры блоку (только модификатору) |
Элемент может иметь классы и блока и элемента |
Первым в атрибутах тэга идёт class |
Названия классов в атрибуте разделяют двойным пробелом |
Как определить элемент или блок: может ли это понадобится вне родительского элемента? (Если да - Блок, если нет - Элемент) |
Классы-модификаторы не используются без классов, которые они модицифцируют: <div class="header header--big">
|
|
Created By
Metadata
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by Yur375