Show Menu

BEM Cheat Sheet by

Основные принципы методолгоии БЭМ (модификация Николаса Галлахера)
webdev

Части БЭМ

Блок
незави­симый элемент страницы со своим назнач­ением (шапка, навигация, пост): .page­-block
Элем­ент
часть блока, имеющая смысл только внутри него (пункт меню, заголовок, ссылка), отделяется двойным подчер­кив­анием: .page­-bl­ock­__e­lement
Моди­фик­атор
Модифи­кация внешнего вида/п­ове­дения блока или элемента, отделяется двойным тире: .page­-bl­ock­--m­odi­fic­ator / .page­-bl­ock­__e­lem­ent­--m­odi­fic­ator
 

Основные принципы

Исполь­зовать только селекторы по классам
Селекторы не более чем из двух элементов (.class .child­ren­-cl­ass)
Не исполь­зовать глобальные стили (исклю­чение: normalize и параметры шрифтов)
Обёртка: .wrapper
Название класса отображает назнач­ение, а не вид
Не задавать размеры блоку (только модифи­катору)
Элемент может иметь классы и блока и элемента
Первым в атрибутах тэга идёт class
Названия классов в атрибуте разделяют двойным пробелом
Как определить элемент или блок: может ли это понадо­бится вне родите­льского элемента? (Если да - Блок, если нет - Элемент)
Классы­-мо­диф­икаторы не исполь­зуются без классов, которые они модици­фци­руют: <div class=­"­header  header­--b­ig">

Download the BEM Cheat Sheet

1 Page
//media.cheatography.com/storage/thumb/yur375_bem.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Адаптивная вёрстка Cheat Sheet
            Chrome Developer Tools Cheat Sheet by Boris Smus

          More Cheat Sheets by Yur375

          Адаптивная вёрстка Cheat Sheet
          flat-design Cheat Sheet
          Web Console Cheat Sheet