BEM（Block-Element-Modifier）是一种前端编码方法论，它提供了一种规则化的 CSS 类名命名方式，有助于提高可维护性和可扩展性。但是，BEM 的类名命名方式相对繁琐，易于出错。因此，开发了 easy-bem-naming 这个 npm 包，用于快速生成符合 BEM 命名规范的类名。
安装 easy-bem-naming
使用 npm 包管理工具，在项目根目录下执行以下命令安装 easy-bem-naming：
npm install easy-bem-naming
使用 easy-bem-naming
初始化 easy-bem-naming
在 JavaScript 代码中引入 easy-bem-naming：
const BemNaming = require('easy-bem-naming');
const naming = new BemNaming('block');
console.log(naming);执行上述代码，输出结果为：
{
block: 'block',
elem: '__',
mod: '_',
modValue: '_'
}easy-bem-naming 提供了默认的 BEM 命名规范，并将初始块名设置为 'block'。
基本用法
naming.elem('elem'); // 'block__elem'
naming.mod('mod'); // 'block_mod'
naming.mod('mod', 'val'); // 'block_mod_val'
naming.elem('elem', { mod: 'val' }); // 'block__elem_mod_val'
naming.elem({ mod: 'val' }, 'elem'); // 'block__elem_mod_val'以上代码就是一些 easy-bem-naming 最基本的使用示例，将会得到他们所对应的 BEM 类名。
命名约定
在 BEM 的命名约定中，block、element、modifier 的命名需遵循一定的规则，例如：
- block - 定义块名，使用 kebab-case（短横线）命名方式。
- element - 如果 block 内的元素需要添加 class，需使用双下划线（__）连接。
- modifier - 块和元素的状态变化，需使用单下划线（_）连接，如 block_mod。
const naming = new BemNaming('block-name');
naming.elem('elem'); // 'block-name__elem'
naming.mod('mod'); // 'block-name_mod'自定义命名约定
在 BEM 命名约定中，各个部分的命名方式可自行定制，可通过实例化时传入自定义参数进行设置。
-- -------------------- ---- ------- ----- ------ - --- ----------- ------ ----------- ----- ----- ---- ---- --------- --- --- -------------------- -- ---------------- ------------------ -- -------------- ----------------- ------- -- ------------------ ------------------- - ---- ----- --- -- ------------------------ ------------- ---- ----- -- -------- -- ------------------------
指定作用域
在 BEM 命名规范中，block 是必选参数，如果在某些场景下不需要 block，请使用 childScope 来指定作用域，例如：
const naming = new BemNaming('block');
naming.elem('elem', { childScope: false }); // '__elem'
naming.mod('mod', { childScope: false }); // '_mod'
naming.mod('mod', 'val', { childScope: false }); // '_mod_val'
naming.elem('elem', { mod: 'val', childScope: false }); // '__elem_mod_val'
naming.elem({ mod: 'val', childScope: false }, 'elem'); // '__elem_mod_val'项目应用示例
以下代码演示了在 React 项目中如何使用 easy-bem-naming 生成符合 BEM 命名规范的样式类：
-- -------------------- ---- -------
------ - --------- - ---- ------------------
----- ------ - --- --------------------
----- ------ ------- --------------- -
-------- -
----- - --------- --------- - - -----------
----- --- - --------- - ------------- - - ---
----- --------- - ------------------------
----- -------- - -------------
----- ------ - ---
-------------------------- -- -
-- --------------------------- -
----------------------------------
- ---- -- --------- --- --------- -
-------------------------------- -----------------------
-
---
------ ------- -------------- - -------- - -------------- - - --------------- ---- - -------------------------
-
-上述代码实现了一个 Button 组件，Button 组件使用 easy-bem-naming 生成符合 BEM 命名规范的类名，并将组件的 props 转换成对应的 BEM 类名。此示例代码有助于开发人员更好地理解如何在实际项目中使用 easy-bem-naming。
结论
easy-bem-naming 是一个非常实用的 npm 包，可用于快速生成符合 BEM 命名规范的类名。使用 easy-bem-naming 可以大大提高前端项目的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630081e8991b448e0d6e