BEMIT Cheatsheet

README.md

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

postcss.md

/* Block Element */
@mixin e element-name { }

/* Block Modifier */
@mixin m modifier-name { }

/* Object */
@mixin o object-name { }

/* Component */
@mixin c component-name { }

/* Utility */
@mixin u utility-name { }

/* Theme */
@mixin t theme-name { }

/* Scope */
@mixin s scope-name { }

/* States */
@mixin is state-name { }
@mixin has state-name { }

/* Hack */
@mixin hack hack-name { }

/* Javascript */
@mixin js node-name { }

/* Quality Assurance */
@mixin qa node-name { }

/* Small Styles */
@mixin sm { }

/* Medium Styles */
@mixin md { }

/* Large Styles */
@mixiin lg { }

/* Print Styles */
@mixin print { }