BEM规范 - 技术栈

BEM规范

yyt3630458412026-01-04 8:53

类型	模式	示例	说明
块	`.block`	`.menu`	独立组件
元素	`.block__element`	`.menu__item`	块的组成部分
修饰符	`.block--modifier`	`.menu--dark`	块的状态/变体
带修饰符的元素	`.block__element--modifier`	`.menu__item--active`	元素的状态/变体
比如：

css 复制代码

z-button__element--disabled /*z-button"组件中的某个元素（element）在禁用状态下的样式*/

带 State 的 BEM 命名规范：

通常是动态的

css 复制代码

.block[__element][--modifier][.is|has-state] 
/*eg:*/
<ul class="nav__dropdown is-open">

最佳实践

ts 复制代码

function __bem(
  prefixName: string,
  blockSuffix: string,
  element: string,
  modifier: string
) {
  let className = prefixName;

  if (blockSuffix) {
    className += `-${blockSuffix}`;
  }

  if (element) {
    className += `__${element}`;
  }

  if (modifier) {
    className += `--${modifier}`;
  }

  return className;
}

function createBEM(prefixName: string) {
  const b = (blockSuffix: string = "") =>
    __bem(prefixName, blockSuffix, "", "");
  const e = (element: string = "") =>
    element ? __bem(prefixName, "", element, "") : "";
  const m = (modifier: string = "") =>
    modifier ? __bem(prefixName, "", "", modifier) : "";
  const be = (blockSuffix: string, element: string) =>
    blockSuffix && element ? __bem(prefixName, blockSuffix, element, "") : "";
  const bm = (blockSuffix: string, modifier: string) =>
    blockSuffix && modifier ? __bem(prefixName, blockSuffix, "", modifier) : "";
  const em = (element: string, modifier: string) =>
    element && modifier ? __bem(prefixName, "", element, modifier) : "";
  const bem = (blockSuffix: string = '', element: string = '', modifier: string = '') =>
    blockSuffix && element && modifier
      ? __bem(prefixName, blockSuffix, element, modifier)
      : "";
  const is = (name: string,state: any) => (state ? `is-${name}` : ``);

  return {
    b,
    e,
    m,
    be,
    bm,
    em,
    bem,
    is
  };
}

export function createNamespace(name: string) {
  const prefixName = `z-${name}`;
  return createBEM(prefixName);
}