[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;
}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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent