Nascent Plasticine Materialist

    pobem

    1.1.2 • Public • Published

    npm travis coverage Downloads

    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 */
            width100px;
     
            mod(mod val) {  /* 4 */
                width40px;
            }
        }
     
        > 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)
            width100px
     
        > 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('~~')
            }
        })
    ]

    Install

    npm i pobem

    DownloadsWeekly Downloads

    4

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • belozyorcev