PostCSS Bem

PostCSS plugin implementing BEM as at-rules.

@utility utilityName {
color: green;
}
@utility utilityName small {
color: blue;
}
@component ComponentName {
color: cyan;
@modifier modifierName {
color: yellow;
}
@descendent descendentName {
color: navy;
}
@when stateName {
color: crimson;
}
}
@component-namespace nmsp {
@component ComponentName {
color: red;
}
}

.u-utilityName {
color: green;
}
.u-sm-utilityName {
color: blue;
}
.ComponentName {
color: cyan;
}
.ComponentName--modifierName {
color: yellow;
}
.ComponentName-descendentName {
color: navy;
}
.ComponentName.is-stateName {
color: crimson;
}
.nmsp-ComponentName {
color: red;
}

With shortcuts

@b nav { /* b is for block */@e item { /* e is for element */display: inline-block;
}
@m placement_header {
background-color: red;
}
}

.nav {}
.nav__item {
display: inline-block
}
.nav_placement_header {
background-color: red
}

Usage

postcss([require('postcss-bem')({defaultNamespace: undefined,// default namespace to use, none by defaultstyle: 'suit',// suit or bem, suit by default,separators: {descendent: '__'// overwrite any default separator for chosen style},shortcuts: {utility: 'util'//override at-rule name}})])

See PostCSS docs for examples for your environment.