CSS

    BEM class name generator with CSS variable support.

    generateCssNamespaceFn

    Curried factory: generateCssNamespaceFn(prefix)(namespace) returns a BEM helper set.

    import { generateCssNamespaceFn } from '@cc-heart/utils-client'

const ns = generateCssNamespaceFn('cc')('button')

ns.b()            // 'cc-button'
ns.b('primary')   // 'cc-button-primary'
ns.e('icon')      // 'cc-button__icon'
ns.m('disabled')  // 'cc-button--disabled'
ns.bem('primary', 'icon', 'spin') // 'cc-button-primary__icon--spin'

    CSS variables

    ns.genCssVar({ color: 'red', size: '14px' })
// { '--cc-button-color': 'red', '--cc-button-size': '14px' }

ns.getCssVar('color') // '--cc-button-color'

    Demo

    Type a block / element / modifier and see the generated BEM classes:

    Loading...