b_

BEM class name formatter

Example

Simple

varb=require('b_');// blocksb('button',{size: 'xl'})==='button button_size_xl';// block elementsb('modal','close',{size: 'xl'})==='modal__close modal__close_size_xl';// boolean modifiersb('button',{hidden: false})==='button';b('button',{hidden: true})==='button button_hidden';

Alternative BEM syntax

varB=require('b_').B;varb=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

varB=require('b_').B;varb=B({isFullModifier: false});b('button_call-for-action',{disabled: true,focused: 'yes'}))==='button_call-for-action _disabled _focused_yes';

React example

varb=require('b_').with('b-button');// orvarb=require('b_').lock('b-button');// which is `require('b_').bind(null, 'b-button');` but much convenientfunctionrender(){return(<divclassName={b()}><spanclassName={b('icon',{type: 'add'})}></span><spanclassName={b('text')}></span></div><divclassName={b({size: 'small'})}><spanclassName={b('icon',{type: 'add'})}></span><spanclassName={b('text')}></span></div>);}