npm 包 @bem/entity-name 使用教程

在前端领域，BEM(Block-Element-Modifier)是一种十分流行的CSS命名约定。@bem/entity-name 这个npm包就是专门用于生成BEM类名的工具。本文将介绍该npm包的使用方法。

安装

npm install @bem/entity-name

使用

1. 创建一个实例

const EntityName = require('@bem/entity-name');

const bem = new EntityName('block');

2. 根据不同状态生成类名

// 生成一个block类名:
bem.setMod('modifier1');
// block block--modifier1

// 再生成一个状态：
bem.setMod('modifier2');
// block block--modifier1 block--modifier2

3. 生成带有Element的类名

// 生成一个Element的类名：
bem.setElem('element');
// block__element

// 再生成一个状态：
bem.setMod('modifier1', 'element');
// block__element block__element--modifier1

4. 将Element添加到块中生成类名

bem.addElem('element');
// block__element

// 再修改状态：
bem.setMod('modifier1', 'element');
// block__element block__element--modifier1

5. 对于带有多个状态和Element的Block，使用mix()方法

const bem = new EntityName('block');
bem.addMod('modifier1');
bem.addMod('modifier2');
bem.addElem('element');

bem.mix();
// block block--modifier1 block--modifier2 block__element block__element--modifier1 block__element--modifier2

6. 在React组件中使用

-- -------------------- ---- -------
-------- ------------- -
  ----- --- - --- --------------------
  ------------------------
  
  ------ -
    ---- ----------------------
      ----- --------------------------------------------------
      ----- ---------------------------------------------------
    ------
  --
-

至此，@bem/entity-name的使用方法介绍完毕。

该npm包会在实际开发中带来较大的便利，通过规范的类名，可以减少问题的出现和维护的难度，提高代码的可读性和可维护性。但是在实际使用时也需要注意不要过度使用，避免类名失控。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1fe0de403f2923b035c62a