@zarm-design/bem

Usage in JS

import { createBEM } from '@zarm-design/bem';

const bem = createBEM('button', { prefixCls: 'za' });

bem(); // za-button

bem([{ loading: true }, 'customClass']); // za-button za-button--loading customClass

bem('text'); // za-button__text

bem('text', ['customClass']); // za-button__text customClass

bem('text', [
  {
    theme: 'primary',
    block,
    loading: true,
    disabled: false,
  },
  'customClass',
]); // za-button__text za-button__text--theme-primary za-button__text--block za-button__text--loading customClass

Usage in SASS

Input

@import '~@zarm-design/bem/sass';

// set classname prefix
$prefixCls: za;

@include b(button) {
  height: 40px;

  @include m(primary) {
    background: #00bc70;

    @include m(active) {
      opacity: 0.9;

      @include b(icon) {
        display: inline-block;
      }
    }
  }

  @include e(text) {
    color: #fff;

    @include m(disabled) {
      color: #ddd;
      cursor: not-allowed;
    }
  }
}

Output

.za-button {
  height: 40px;
}
.za-button--primary {
  background: #00bc70;
}
.za-button--primary.za-button--active {
  opacity: 0.9;
}
.za-button--primary.za-button--active .za-icon {
  display: inline-block;
}
.za-button__text {
  color: #fff;
}
.za-button__text--disabled {
  color: #ddd;
  cursor: not-allowed;
}

API

const createBEM: (
  name: string,
  config?: BEMConfig,
) => (element: string | ModifierType, modifiers?: ModifierType) => string;

ModifierType

type ModifierType = (string | undefined | { [x: string]: boolean | string | undefined })[];

BEMConfig

interface BEMConfig {
  prefixCls?: string;
  blockSeparator?: string;
  elementSeparator?: string;
  modifierSeparator?: string;
  modifierValueSeparator?: string;
}

属性	对应 SASS 变量	类型	默认值	说明
prefixCls	$prefixCls	string	''	类名前缀
blockSeparator	$blockSeparator	string	'-'	模块连接符
elementSeparator	$elementSeparator	string	'__'	元素连接符
modifierSeparator	$modifierSeparator	string	'--'	修饰符连接符
modifierValueSeparator	-	string	'-'	修饰符值连接符