BEM（Block Element Modifier）是一种前端开发中常用的命名方式，它可以让我们更好地组织 HTML 和 CSS，提高代码可维护性和复用性。在 BEM 中，每一个 DOM 元素都可以被当作一个“块”（Block），块里包含多个“元素”（Element），元素可以被分成多个“修饰符”（Modifier）。使用 BEM 命名方式可以让我们清晰地表示出元素之间的层级关系和样式特征，并且方便多人协同开发。
但是在实际工作中，我们经常会遇到需要频繁手动拼接 BEM 类名的情况，这不仅容易出错，还会浪费时间。为了提高开发效率，社区中出现了许多自动化生成 BEM 类名的 npm 包。其中，@fesk/bem-js 是一个比较常用的 npm 包，下面将介绍它的使用教程。
安装
在终端中使用 npm 安装 @fesk/bem-js 即可：
npm install @fesk/bem-js
使用
使用 @fesk/bem-js 的过程分为两步：首先需要创建一个 BEM 命名环境（Block），然后使用该环境中提供的 API 来生成对应的 BEM 类名。
创建 Block
在使用 @fesk/bem-js 之前，我们需要先创建一个 BEM 命名环境。在 @fesk/bem-js 中，可以使用 BEM.createBlock 方法来创建一个 Block，示例如下：
import BEM from '@fesk/bem-js';
const block = BEM.createBlock('my-block');其中，'my-block' 是该 Block 的名字。创建完成之后，我们可以使用 block.getElement 和 block.getModifier 方法来分别创建 Element 和 Modifier。
创建 Element
在一个 Block 中，每一个 DOM 元素都可以被当做一个 Element。在 @fesk/bem-js 中，我们可以使用 block.getElement 方法来创建一个 Element，示例如下：
const element = block.getElement('my-element');其中，'my-element' 是该 Element 的名字。创建完成之后，我们可以使用它提供的 API 来生成对应的 BEM 类名。
创建 Modifier
在 BEM 中，一个 Modifier 可以用来添加或者修改元素的一些样式特征。在 @fesk/bem-js 中，我们可以使用 block.getModifier 方法来创建一个 Modifier，示例如下：
const modifier = block.getModifier('big');其中，'big' 是该 Modifier 的名字。创建完成之后，我们可以使用它提供的 API 来生成对应的 BEM 类名。如果需要在 Modifier 的值中使用变量，则可以在 BEM 类名中使用占位符 {}。示例如下：
const colorModifier = block.getModifier('color', { value: 'red' });
colorModifier.getClassName(); // 'my-block--color-red'最终结果
使用 @fesk/bem-js 之后，我们的代码可以更加清晰易懂，示例如下：
-- -------------------- ---- ------- ------ --- ---- --------------- ----- ----- - ---------------------------- ----- ------ - --------------------------- ----- ----- - -------------------------- ----- ------- - ---------------------------- ----- ------------- - -------------------------- - ------ ----- --- -- -- --- -- ----- ---------- - --------------------- ----- ----------- - ---------------------- ----- ---------- - --------------------- ----- ------------ - ----------------------- ----- --------------- - ---------------------------------------------------
总结
通过本文的介绍，我们了解了如何使用 @fesk/bem-js 来自动生成 BEM 类名，提高前端开发的效率。使用该 npm 包可以让我们更加专注于业务逻辑的实现，避免手动拼接类名带来的错误和时间浪费。同时，这种使用方式也符合 BEM 命名方式的规范，使得我们可以更好地组织 HTML 和 CSS，提高代码可维护性和复用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa31b5cbfe1ea06103ab