# useNamespace

参考 element-plus 实现，创建一个 bem 对象，调用封装的方法，可以生成符合 bem 规范的 class，避免命名容易冲突

::: tip

改自 https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts

- 去除了 namespace,增加了 cssModule

:::

## Usage

```vue
<template>
  <div :class="b()" :style="cssVar({ menu: 'red' })">
    <div :class="e('header')"> </div>
    <div :class="[e('main')]" :style="{ color: cssVarName('menu') }">
      <div :class="[is('active')]"> </div>
      <div :class="[em('main', 'primary')]"> </div>
    </div>
    <div :class="e('footer')"> </div>
  </div>
</template>
<script setup lang="ts">
  import { useNamespace } from '@eciol/hooks';

  const { b, e, m, be, em, bm, bem, is, cssVar, cssVarName, cssVarBlock, cssVarBlockName } =
    useNamespace('demo');
</script>

<style lang="scss" scoped module>
  @include b('demo') {
    @include e('header') {
      text-align: left;
      cursor: pointer;
    }
    @include e('main') {
      @include is('active') {
        color: 'green';
      }
      @include m('primary') {
        color: 'blue';
      }
    }
    @include e('footer') {
      text-align: center;
    }
  }
</style>
```

## Type Declarations

```ts
declare const useNamespace: (
  block: string,
  /**
   * @description 是否开启cssModule模式
   * @default true
   */
  useCssModule?: boolean,
  /**
   * @description 是否开启命名空间模式
   * @default false
   */
  useNamespace?: boolean
) => {
  b: (blockSuffix?: string) => string;
  e: (element: string) => string;
  m: (modifier: string) => string;
  be: (blockSuffix: string, element: string) => string;
  em: (element: string, modifier: string) => string;
  bm: (blockSuffix: string, modifier: string) => string;
  bem: (blockSuffix: string, element: string, modifier: string) => string;
  is: {
    (name: string, state: boolean | undefined): string;
    (name: string): string;
  };
  cssVar: (object: Record<string, string>) => Record<string, string>;
  cssVarName: (name: string) => string;
  cssVarBlock: (object: Record<string, string>) => Record<string, string>;
  cssVarBlockName: (name: string) => string;
};
```