BEM class names builder

JavaScript class to build html classes by BEM methodology. Each method elem(), mod(), mix() returns new modified object if arguments pass, otherwise returns corresponding value

Method toString() convert object to BEM selector

Installation

npm install bem-class-names-builder

Configuring

Default config

{
    prefix: null,
    modValues: true,
    elemSeparator: '__',
    modSeparator: '--',
    modValueSeparator: '_'
}

Set own config

// myBEM.js
import {configBEM} from 'bem-class-names-builder';

export default configBEM({
    prefix: 'cp-',
    modValues: false,
    elemSeparator: '---',
}) 

// usingMyBEM.js

import BEM from 'myBEM.js';

(new BEM('block').elem('elem')).toString() === 'cp-block---elem';

Examples

Plain JavaScript

import BEM from 'bem-class-names-builder';

const list = new BEM('list'),
    item = page.elem('item');

console.log( list.toString() ); // "list"
console.log( item.toString() ); // "list__item"
console.log( item.mods('selected').toString() ); // "list__item--selected"
console.log( item.mods({size: 'large'}).toString() ); // "list__item--size_large"
console.log( item.mix(new BEM('link')).toString() ); // "list__item link"
console.log( list.mods('full-width').mix('menu').toString() ); // "list--full-width menu"

Using with React

import React from 'react';
import BEM from 'bem-class-names-builder';

class List extends React.Component {
    list = new BEM('list');
    
    render() {
        return (
            <ul className={bem}>
                <li className={list.elem('item')}>one</li>
                <li className={list.elem('item').mods({selected: true}}>two</li>
                <li className={list.elem('item').mix('link'}>three</li>
            </ul>
        )
    }
}

Methods

constructor

• arguments: string - block name
• return: new BEM object with block name

new BEM('block-name') == 'block-name' // Notice: '==' call toString() method

block

• arguments: string - block name
• return:
  • clone with new block name - if any argument passed
  • block name - if no one argument passed

( new BEM('block-name') ).block('new-block-name') == 'new-block-name'

elem

• arguments: string - element name
• return:
  • clone with new element name - if any argument passed
  • element name - if no one argument passed

( new BEM('block') ).elem('elem') == 'block__elem'

mod

• arguments: string, false, Object({mod: value}) or list of values these types - one modificator or list of them
• return:
  • clone with new modificators - if any argument passed
  • object with all modificators - if no one argument passed

const elem = new BEM('block').elem('elem');

// Notice: '==' call toString() method
elem                            == 'block__elem'
elem.mod('mod')                 == 'block__elem block__elem--mod'
elem.mod({mod: true})           == 'block__elem block__elem--mod'
elem.mod(false && 'one', 'two') == 'block__elem block__elem--two'
elem.mod('one', 'two', 'three') == 'block__elem block__elem--one block__elem--two block__elem--three'
elem.mod({one: 'value'}, 'two') == 'block__elem block__elem--one_value block__elem--two'

elem.mod({one: 'value'}, false && 'two', 'three').mod() === {one: 'value', three: true}

mix

• arguments: string or list of strings - one mixin or list of them
• return:
  • clone with new mixins - if any argument passed
  • array of mixins - if no one argument passed

const elem = new BEM('block').elem('elem');

// Notice: '==' call toString() method
elem                            == 'block__elem'
elem.mix('mixin')               == 'block__elem mixin'
elem.mix(false && 'one', 'two') == 'block__elem two'
elem.mix(new BEM('list'))       == 'block__elem list'

elem.mix('one', 'two').mix() == ['one', 'two']