PostCSS Bem [![Build Status][ci-img]][ci]

[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.