BEM syntax for CSS. Problems? Use POBEMS!

This is old version! Please using pobem (next step development pobems)

This is plugin based on rebem-css written by Kir Belevich and Denis Koltsov.

Overview

Dead simple

It just replaces substrings in selectors:

:block()

:block(block) {}
.block {}

:elem()

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

:block(block):elem(elem) :elem(elem2) :block(block2):elem(elem) {}
.block__elem .block__elem2 .block2__elem {}

:mod()

:block(block):mod(mod) {}
.block_mod {}

:block(block):mod(mod val) {}
.block_mod_val {}

:block(block):mod(mod val):mod(mod2) {}
.block_mod_val.block_mod2 {}

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

        }
    }

    &:elem(elem) {
        &:mod(mod val) {

        }
    }
}

Usage

pobems is a PostCSS plugin.

CLI

npm i -S postcss postcss-cli pobems

postcss --use pobems test.css -o test.css

API

npm i -S postcss pobems

import postcss from 'postcss';
import pobems from 'pobems';

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

webpack

npm i -S postcss postcss-loader pobems

import pobems from 'pobems';

export default {
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style!css!postcss'
            }
        ]
    },
    postcss() {
        return [ pobems ];
    }
};

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': {
            BEM_MOD_DELIM: JSON.stringify('--'),
            BEM_ELEM_DELIM: JSON.stringify('~~')
        }
    })
]