bem-cls

An easy-to-use BEM class name generator.

Install

npm i -S bem-cls

Usage

var bemcls = require('bem-cls');

var c = bemcls('myblock');

c(); // myblock

c.block; // myblock

c('btn'); // myblock__btn

c('btn', 'required'); // myblock__btn myblock__required

c('btn', false); // myblock__btn

c({ btn: true, required: false }); // myblock__btn

c(['btn', {required: true}]); // myblock__btn myblock__required

c(c.exact('exact-name'), 'btn'); // exact-name myblock__btn

c.exact('exact-name', c.block); // exact-name myblock

Use in React

import bemcls from 'bem-cls';

const c = bemcls('my-comp');

class MyComp extends React.Component {
    render() {
        const { className, hasFooter, contentCollapsed } = this.props;

        return (
            <div className={c.exact(c.block, className)}>
                <div className={c('header')}/>
                <div className={c('content', { 'content-collapsed': contentCollapsed })}/>
                <div className={c(hasFooter && 'footer')}/>
            </div>
        );
    }
}