pobem

Pobem - postcss plugin for BEM

BEM syntax for CSS problem? Use POBEM!

Overview

Using with postcss-nested or less/sass

block(block).mod(mod val) { /* 1 */
    mod(mod2 val2) {  /* 2 */
        color: #444223;
    }
 
    elem(elem) {  /* 3 */
        width: 100px;
 
        mod(mod val) {  /* 4 */
            width: 40px;
        }
    }
 
    > h2 { /* 5 */
        opacity: .3;
    }
}

1 -> .block_mod_val
2 -> .block_mod_val.block_mod2_val2
3 -> .block_mod_val .block__elem
4 -> .block_mod_val .block__elem_mod_val
5 -> .block_mod_val > h2

Using with stylus

block(block).mod(mod val)
    mod(mod2 val2)
        color: #444223
 
    elem(elem)
        width: 100px
 
    > h2
        opacity: .3

Combined chain syntax

block(block).elem(elem) {}
-> .block__elem {}

Using pseudo elements

block(block).elem(elem):after {}
-> .block__elem:after {}

Quotes and delimiters between mod val is optional

block(block).mod(mod val) === block('block').mod('mod', 'val') === block('block').mod('mod' -> 'val')

Usage

pobem is a PostCSS plugin.

CLI

npm i -S postcss postcss-cli pobem

postcss --use pobem test.css -o test.css

API

npm i -S postcss pobem

import postcss from 'postcss';
import pobem from 'pobem';
 
console.log(
    postcss([ pobem ]).process('block(block) {}').css
);
// .block {}

webpack

npm i -S postcss postcss-loader pobem

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

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