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.
Input
@ @ @ } @ @ } }}
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: '-'