Rbem
Tiny library without dependencies for better BEM naming.
Instalation
npm install --save rbem
Best with Webpack and Babel:
;
Basics
Rbem comes with two functions block
and applyModifiers
.
block
is a higher order function that is used for creating namespace for single component. Block produces elements:
; // block - single namespace for all dependent elementsconst btn = ; // -> function // elements - multiple instances of blockconst icon = ; // -> 'button__icon'const text = ; // -> 'button__text'
applyModifiers
function takes care of adding modifiers both to blocks and elements:
; const btn = ;const primayButton = ; // -> 'button--primary'const icon = ; // -> 'button__icon'const lightIcon = ;// -> 'button__icon button__icon--light'
Best with React
;; { superprops; thisstate = pressed: false ; } { this; } { const btn = ; const btnClassName = ; return <button className=btnClassName onClick=thishandleClick> <span className=>thispropschildren</span> <span className=> <img className= src=thispropsicon alt="" /> </span> </button> ; }
Applying modifiers
Modifiers can be applied with string, array or object:
; const icon = 'icon';const bigWhiteIcon = ;// -> 'button__icon button__icon--big button__icon--white' // black modifier will be added only if condition evaluates to trueconst bigMaybeBlackIcon = ;// -> 'button__icon button__icon--big button__icon--black'