BEM class name formatter
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.editorconfig
.gitignore
.jscs.json
.jshintignore
.jshintrc
.npmignore
.travis.yml
AUTHORS
CHANGELOG.md
CONTRIBUTION.md
LICENSE
README.md
index.js
package.json

README.md

b_

NPM Version Build Status

BEM class name formatter

Example

Simple

var b = require('b_');

// blocks
b('button', {size: 'xl'}) === 'button button_size_xl';

// block elements
b('modal', 'close', {size: 'xl'}) === 'modal__close modal__close_size_xl';

// boolean modifiers
b('button', {hidden: false}) === 'button';
b('button', {hidden: true}) === 'button button_hidden';

Alternative BEM syntax

var B = require('b_').B;
var b = B({
    tailSpace: ' ',
    elementSeparator: '-',
    modSeparator: '--',
    modValueSeparator: '-',
    classSeparator: ' '
});

b('block', 'elem', {mod1: true, mod2: false, mod3: 'mod3'}) ===
'block-elem block-elem--mod1 block-elem--mod3-mod3 ';

BEViS syntax

var B = require('b_').B;
var b = B({isFullModifier: false});

b('button_call-for-action', {disabled: true, focused: 'yes'}) ===
'button_call-for-action _disabled _focused_yes';

Full bool values in modifiers

var B = require('b_').B;
var b = B({isFullBoolValue: true});

b('button', {disabled: true, focused: false}) ===
'button button_disabled_true button_focused_false';

React example

var b = require('b_').with('b-button');
// or
var b = require('b_').lock('b-button');
// which is `require('b_').bind(null, 'b-button');` but much convenient

function render() {
    return (
        <div className={b()}>
            <span className={b('icon', {type: 'add'})}></span>
            <span className={b('text')}></span>
        </div>
        <div className={b({size: 'small'})}>
            <span className={b('icon', {type: 'add'})}></span>
            <span className={b('text')}></span>
        </div>
    );
}