Bemy-class-builder
Simple utility which allows you to use BEM class naming without painful copy-pasting these long names here and there.
Usage
bemy-class-builder
is supposed to be used alongside with bemy-style-loader
, so don't hesitate to check its docs
Block classes
Define your component classes using BEM principles (to configure naming schema check out bemy-style-loader
docs)
and use it in your component file
// base block stylesconst blockClassName = // => 'button; // block styles with modifiersconst collapsedBlockClassName = // => 'button button_disabled'const darkBlockStyles = // => 'button button_theme_danger' // passing additional classesconst blockClassNameWithMixin = // => 'button foo'const modifierAndMixinClassName = // => 'button button_disabled button_theme_danger foo'
Element classes
Element classes generation is similar to block with only one difference - you should call property corresponding to element name on the root style object.
const elemClassName = styles // => 'header__navigation'const elemAndAllAllAll = styles // => 'header__navigation header__navigation_collapsed bar'
Api
styles(mods, mixins)
Generate block class names with specified mods and mixins
Parameter | Type | Description |
---|---|---|
mods |
object |
Dictionary of modifiers to set |
mods[key] |
string |
Modifier name |
mods[key][value] |
string / boolean |
Modifier value (modifiers with falsy values won't be included in the output) |
mixins |
string / array / object |
Mixin class in any format suitable for amazing yet simple classnames lib |
styles[elemName](elemMods, mixins)
Generate element class names of given block with specified mods and mixins.