bemy-class-builder v1.1.0

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

styles[elemName](elemMods, mixins)

Generate element class names of given block with specified mods and mixins.