贝姆

用于创建老式BEM课程的小型工具,特别是在反应背景下.

注:仅供内部使用.

快速启动

根据组成部分定义

import { bem } from "bem";

export const AlertBar = ({ level, message }) => {
  const b = bem("alert-bar");

  return (
    <div className={b.e("wrapper")}>
      <p className={b.e("message").m(level)}>{message}</p>
    </div>
  );
};

渲染

<AlertBar message="Hello!" level="warning" />

也门

<div class="alert-bar__wrapper">
  <p class="alert-bar__message alert-bar__message--warning">Hello!</p>
</div>

实例

简单元素

• bem('alert-bar').e('wrapper') 产量 "alert-bar__wrapper"

字符串修改器

• bem('alert-bar').m('warning') 产量 "alert-bar alert-bar--warning"
• bem('alert-bar').e('wrapper').m('warning') 产量 "alert-bar__wrapper alert-bar__wrapper--warning"

矩阵修改器

• bem('alert-bar').m(['warning', 'condensed']) 产量 "alert-bar alert-bar--warning alert-bar--condensed"
• bem('alert-bar').e('wrapper').m(['warning', 'condensed']) 产量 "alert-bar__wrapper alert-bar__wrapper--warning" alert-bar__wrapper--condensed

对象修改器

• bem('alert-bar').m({ warning: true, condensed: true }) 产量 "alert-bar alert-bar--warning alert-bar--condensed"
• bem('alert-bar').e('wrapper').m({ warning: true, expanded: false }) 产量 "alert-bar__wrapper alert-bar__wrapper--warning"