bemy-class-builder
v1.1.0
Published
Tool which is here to help you work with BEM structured classes in a nice way
Downloads
6
Readme
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)
.button {
// base button styles
}
.button_disabled {
// disabled button styles
}
.button_theme_danger {
// danger button styles
}
and use it in your component file
import styles from './styles.css'
// base block styles
const blockClassName = styles() // => 'button;
// block styles with modifiers
const collapsedBlockClassName = styles({ disabled: true }) // => 'button button_disabled'
const darkBlockStyles = styles({ theme: 'danger' }) // => 'button button_theme_danger'
// passing additional classes
const blockClassNameWithMixin = styles(null, 'foo') // => 'button foo'
const modifierAndMixinClassName = styles({ disabled: true, theme: 'danger' }, 'foo') // => '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.
.header {
// base header styles
}
.header__navigation {
// navigation element styles
}
.header__navigation_collapsed {
// collapsed navigation styles
}
import styles from './styles.css'
const elemClassName = styles.navigation() // => 'header__navigation'
const elemAndAllAllAll = styles.navigation({ collapsed: true }, 'bar') // => '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 setmods[key]
| string
| Modifier namemods[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.