/blem

functional block__element--modifier strings

Primary LanguageJavaScript

blem

functional block__element--modifier strings

memoized BEM string generators

install

yarn add blem -S

usage

import blem from 'blem'

const bem = blem(`xxx`)

// block
bem() === `xxx`
// block with modifier
bem(``, `cool`) === `xxx xxx--cool`
// block with modifiers
bem(``, `abc`.split(``)) === `xxx xxx--a xxx-b xxx-c`

// element
bem(`yyy`) === `xxx__yyy`
// element with modifier
bem(`yyy`, `zzz`) === `xxx__yyy xxx__yyy--zzz`
// element with modifiers
bem(`yyy`, `abc`.split(``)) === `xxx__yyy xxx__yyy--a xxx__yyy--b xxx__yyy--c`

/*
const X = ({
  bem = blem(`xxx`)
  title
}) => (
  <div className={bem()}>
    <strong className={bem(`title`)}>
      {title}
    </strong>
  </div>
)
*/

original implementation credit: Thomas Shaddox @baddox