postcss-bemed
v1.0.0
Published
PostCSS plugin for BEM class names
Downloads
8
Readme
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: '-'
}