👍
@zhengxs/bem

轻量级无依赖的 bem 工具，支持 nodejs 与浏览器。

快速开始

文档

访问 中文文档 查看更详细的说明

安装

$ npm i @zhengxs/bem --save

使用

import { createBEM } from '@zhengxs/bem'

const options = {
  namespace: {
    component: 'ux',
  },
  // 可选
  // separator: {
  //   element: '-',
  //   modifier: '__',
  //   state: '-'
  // }
}

const bem = createBEM(options)

const button = bem('button')

console.log(button.component())
//-> 'ux-button'

console.log(button.element('icon'))
//-> 'ux-button__icon'

console.log(
  // modifier 和 state 类同
  button.element(
    'left-icon',
    ['title', 'label'],
    { 'right-icon': true, value: false },
    null,
    false,
    undefined
  )
)
//-> ["ux-button__left-icon", "ux-button__title", "ux-button__label", "ux-button__right-icon"]

console.log(button.modifier('default'))
//-> 'ux-button--default'

// 可以中途修改（不推荐）
options['namespace']['component'] = 'md'

console.log(button.component())
//-> 'md-button'

console.log(button.element('icon'))
//-> 'md-button__icon'

console.log(button.modifier('default'))
//-> 'md-button--default'

// 不管调用几次，拿到的都是同一个对象
console.log(button === bem('button'))
// -> true

// 不同名称拿到的是不同的对象
console.log(button === bem('icon'))
// -> false

// 不同的 create，即使是相同的名称拿到的也不一样的
console.log(button === createBEM()('button'))

Try in runkit

升级日志

changelog

感谢

• sass-bem - 从中获得了一些灵感

License

• MIT