postcss-bemed

PostCSS plugin for BEM class names generation. Useful for creation of isolated class names without css-modules (e.g. if you have user themes support). Great for React applications in combination with babel plugin. Can be used with postcss-autoreset without extra configuration.

Usage

Just require it as any other postcss plugin and use special AtRules.

postcss([ require('postcss-bemed')])

Input

@block MyBlock {
  font-size: 20px;
  @modifier fullsized {
    width: 100%;
    height: 100%;
  }
  @element text {
    @modifier result {
      @value ok {
        color: green;
      }
      @value error {
        color: red;
      }
    }
    @modifier size {
      box-sizing: border-box;
      @value full {
        width: 100%;
      }
      @value half {
        width: 50%;
      }
    }
  }
}

Output

.MyBlock {
  font-size: 20px
}
.MyBlock--fullsized {
  width: 100%;
  height: 100%
}
.MyBlock__text {}
.MyBlock__text--result {}
.MyBlock__text--result-ok {
  color: green
}
.MyBlock__text--result-error {
  color: red
}
.MyBlock__text--size {
  box-sizing: border-box
}
.MyBlock__text--size-full {
  width: 100%
}
.MyBlock__text--size-half {
  width: 50%
}

Options

rules

Set custom rule naming. Default is

rules: {
  block: 'block',
  element: 'element',
  modifier: 'modifier',
  value: 'value'
}

separators

Set custom bem separators. Default is

separators: {
  element: '__',
  modifier: '--',
  value: '-'
}