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 default style: '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.