BEMIT Cheatsheet

Give developers more knowledge about how the classes behave in a non-relative sense: BEM + ITCSS = BEMIT

• More Transparent UI Code with Namespaces
• BEMIT: Taking the BEM Naming Convention a Step Further

Evolution

BEM:

.block__element--modifier {}

BEM w/ Namespaces:

.namespace-block__element--modifier {}

BEM w/ Namespaces & Responsive Suffixes:

.namespace-block__element--modifier-[suffix] {}

Namespaces

Object

.o-object-name[<element>|<modifier>] {}

Component

.c-component-name[<element>|<modifier>] {}

Utility

.u-utility-name {}

Theme

.t-theme-name {}

Hack

._<namespace>hack-name {}

Javascript

.js-component-name {}

Responsive Suffixes

Breakpoints

.o-object-name-sm {}
.o-object-name-md {}
.o-object-name-lg {}

Media type

.u-utility-name-print {}