Bem-builder NPM

bem-builder

A simple helper to build complex BEM class names. 675b gzipped, no dependencies.

Installation

npm install bem-builder --save

Usage

import bem from 'bem-builder';

bem((b, e, m, mix) => {
  b('block');
  e('element');
  m(true, 'modifier1');
  m('modifier2');
  m(false, 'modifier3');
  mix('mix1');
  mix('mix2');
})

returns:

block__element block__element--modifier1 block__element--modifier2 mix1 mix2

The BEM function takes an optional config object as a second parameter.

Config object

The following default values can be overwritten:

{
  elementSep: '__', // Element seperator
  modifierSep: '--', // Modifier seperator
}

React example

class Component extends React.Component {
  static propTypes = {
    exampleBool: React.PropTypes.bool,
    exampleNumber: React.PropTypes.number,
  };

  render() {
    const className = bem((b, e, m) => {
      b('block');
      e('element');
      m(this.props.exampleBool, 'modifier1');
      m(this.props.exampleNumber === 42, 'modifier2');
    });

    return (
      <div className={className}>
      </div>
    );
  }
}