作为前端开发者，我们时常需要用到 BEM 命名规范来实现页面的样式。这时候，一个好用的 BEM 插件就能大大提高我们的效率。jsd-plugins-bem 就是一个不错的选择。接下来，让我们来学习如何使用 jsd-plugins-bem 这个 npm 包。
npm 包 jsd-plugins-bem 简介
jsd-plugins-bem 是一个用于生成 BEM 类名的插件。它可以帮助我们快速而简便地生成符合 BEM 命名规范的类名，从而提高我们的开发效率。
安装 npm 包 jsd-plugins-bem
安装 npm 包 jsd-plugins-bem 很简单。只需要在命令行中运行以下命令：
npm i jsd-plugins-bem --save-dev
使用 npm 包 jsd-plugins-bem
使用 jsd-plugins-bem 可以非常方便地生成符合 BEM 命名规范的类名，并且还能避免重复命名，提高代码的可维护性。
定义 block、element、modifier
在使用 jsd-plugins-bem 之前，需要先了解 BEM 命名规范中的 block、element、modifier 的定义。以及它们之间的连接符。
block 代表一个独立的组件或模块，是一个命名空间。它一般由多个单词组成，以连词线 "-" 分隔。例如：header、button 等。
element 代表 block 内的一个子元素，是在 block 的基础上延伸而来的一个元素。也由多个单词组成，以连词线 "-" 分隔。例如：header-title、button-text 等。
modifier 代表 block 或 element 的一个状态或者变化，是一个可选的部分。它也由多个单词组成，以连词线 "-" 分隔。例如：header-active、button-disabled 等。
生成 BEM 类名
使用 jsd-plugins-bem 生成 BEM 类名的方法非常简单。只需要在 HTML 文件中通过 data 属性指定 block、element、modifier 的名称，就能自动生成类名。
<div data-block="header" data-element="title" data-modifier="active"></div>
这样就会生成一个具有以下类名的 div 元素：
<div class="header__title header__title--active"></div>
这个 div 元素会同时具有 block、element 和 modifier 的类名，以及它们之间的连接符。
避免重复命名
有时候，我们需要在同一页面中使用多个相同的 block 或 element。这时候，就需要避免重复命名，以保证页面的样式正确。
为了避免重复命名，我们可以在 data 属性中添加一个可选的数字（order）来表示组件的顺序。jsd-plugins-bem 会相应地在类名中添加一个数字后缀。
<div data-block="header" data-element="button" data-order="1"></div> <div data-block="header" data-element="button" data-order="2"></div>
这样就会生成两个不同的 div 元素：
<div class="header__button header__button--1"></div> <div class="header__button header__button--2"></div>
示例代码
以下是一个使用 jsd-plugins-bem 的示例代码：
-- -------------------- ---- -------
---- -------------------
--------------
---------------------
-
---- -------------------
--------------------
-------
---- ------------------
-------------------
----------------------
-------
---- ---------------------
----------------------
-------
------生成的类名如下：
<div class="header header--fixed"> <div class="header__logo"></div> <div class="header__nav header__nav--active"></div> <div class="header__search"></div> </div>
总结
npm 包 jsd-plugins-bem 是一个专门用于生成 BEM 类名的 npm 插件。它可以大大提高我们的前端开发效率，避免繁琐的手动命名工作。通过本文的介绍，相信读者已经能够轻松上手使用 jsd-plugins-bem 来生成符合 BEM 命名规范的类名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f07dd36403f2923b035bfa4