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 {}

Scope

.s-scope-name {}

State

.[is|has]-state {}

Hack

._<namespace>hack-name {}

Javascript

.js-component-name {}

Quality Assurance

.qa-node-name {}

Responsive Suffixes

Breakpoints

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

Media type

.u-utility-name\@print {}