BEM syntax for CSS.

Overview

Dead simple

It just replaces substrings in selectors:

:block()

:block(block) {}
.block {}

:elem()

:block(block):elem(elem) {}
.block__elem {}

:mod()

: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 {}

CSS compatible

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) {

        }
    }
}

Usage

rebem-css is a PostCSS plugin.

CLI

npm i -S postcss postcss-cli rebem-css

postcss --use rebem-css test.css -o test.css

API

npm i -S postcss rebem-css

import postcss from 'postcss';
import reBEMCSS from 'rebem-css';

console.log(
    postcss([ reBEMCSS ]).process(':block(block) {}').css
);
// .block {}

webpack

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 ];
    }
};

Custom delimeters

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('~~')
        }
    })
]