# @zarm-design/bem

> bem struct

Latest version **0.0.10** (published 2026-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zarm-design/bem
pnpm add @zarm-design/bem
yarn add @zarm-design/bem
bun add @zarm-design/bem
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2026-07-12 |
| First published | 2022-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1726 |
| Author | JeromeLin |
| Maintainers | linji |
| Keywords | bem, sass |

## Links

- npm: https://www.npmjs.com/package/@zarm-design/bem
- Repository: https://github.com/ZhongAnTech/zarm
- Homepage: https://github.com/ZhongAnTech/zarm#readme
- Issues: https://github.com/ZhongAnTech/zarm/issues
- npm.io page: https://npm.io/package/@zarm-design/bem

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.21.0

## Recent versions

- 0.0.10 (latest) — 2026-07-12
- 0.0.2-alpha.0 (alpha) — 2022-11-16
- 0.0.9 — 2023-10-17
- 0.0.8 — 2023-05-24
- 0.0.7 — 2023-04-11
- 0.0.6 — 2023-03-13
- 0.0.3 — 2023-03-08
- 0.0.2-alpha.2 — 2023-02-23
- 0.0.2-alpha.1 — 2023-01-30
- 0.0.1 — 2022-01-11

## README

# `@zarm-design/bem`

## Usage in JS

```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

```scss
@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

```css
.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

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

### ModifierType

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

### BEMConfig

```ts
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 | '-' | 修饰符值连接符 |

---
_Source: https://npm.io/package/@zarm-design/bem · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._