BEM syntax for CSS.
It just replaces substrings in selectors:
:block(block) {} .block {}
:block(block):elem(elem) {} .block__elem {}
:block(block):mod(mod) {} .block_mod {} :block(block):mod(mod val) {} .block_mod_val {}
:block(block):elem(elem):mod(mod) {} .block__elem_mod {} :block(block):elem(elem):mod(mod val) {} .block__elem_mod_val {}
It's just a custom pseudo-classes, so you can use it with Less or any other CSS preprocessor:
:block(block) { &:mod(mod) { } &:elem(elem) { &:mod(mod val) { } } }
rebem-css is a PostCSS plugin.
npm i -S postcss postcss-cli rebem-css
postcss --use rebem-css test.css -o test.css
npm i -S postcss rebem-css
import postcss from 'postcss'; import reBEMCSS from 'rebem-css'; console.log( postcss([ reBEMCSS ]).process(':block(block) {}').css ); // .block {}
npm i -S postcss postcss-loader rebem-css
import reBEMCSS from 'rebem-css'; export default { module: { loaders: [ { test: /\.css$/, loader: 'style!css!postcss' } ] }, postcss() { return [ reBEMCSS ]; } };
Default delimeters are _ for modifiers and __ for elements, but you can change it with special environment variables. For example in webpack you can do this with DefinePlugin:
plugins: [ new webpack.DefinePlugin({ 'process.env': { REBEM_MOD_DELIM: JSON.stringify('--'), REBEM_ELEM_DELIM: JSON.stringify('~~') } }) ]