在前端开发中，BEM (Block Element Modifier) 作为一种组织 CSS 类名的方法已经越来越流行了。但是在实际使用中，手动编写 BEM 类名还是太过麻烦，给开发带了很大的麻烦。为此，开发人员开发了很多 BEM 工具来简化这个过程，其中一个比较好的工具就是 bem-jsd。npm 包 bem-jsd 是一个用于创建 BEM 类名的 JavaScript 库。它可以帮助开发人员更方便地创建 BEM 类名，从而加快开发速度。下面是详细的使用教程。
安装
首先，我们需要安装 bem-jsd。在终端中输入以下命令即可：
--- ------- ------- ----------
初始化
在使用 bem-jsd 之前，我们需要先在我们的 JavaScript 代码文件中导入该库。导入操作如下：
------ --- ---- ----------
使用方法
一旦我们成功导入了 bem-jsd，就可以使用该库的方法来创建 BEM 类名了。
创建 Block 名称
使用 bem.create() 方法来创建 Block 名称。下面是一个使用 bem.create() 方法的示例代码：
--- ----- - -------------------- -------------------
上面的代码将输出“block”。
创建 Element 名称
要创建 Element 名称，我们需要使用 Block 的实例来调用其 elem() 方法。下面是一个使用 elem() 方法的示例代码：
--- ----- - -------------------- --- ------- - ---------------------- ---------------------
上面的代码将输出“block__element”。
创建 Modifier 名称
如果我们需要创建 Block 或者 Element 的 Modifier 名称，我们可以使用 Block 或 Element 的实例来调用其 mod() 方法。下面是一个使用 mod() 方法创建 Block Modifier 名称的示例代码：
--- ----- - -------------------- --- -------- - ---------------------- ----------------------
上面的代码将输出“block--modifier”。
创建混合名称
有时候，我们需要把一个 Block 或 Element 的 Modifier 添加到它的 Element 上。我们可以使用 Block 的实例来调用其 elem() 方法来创建 Element 名称，并使用 Element 的实例来调用其 mod() 方法来创建 Modifier 名称。下面是一个使用混合名称的示例代码：
--- ----- - -------------------- --- ------- - ---------------------- --- -------- - ------------------------ ----------------------
上面的代码将输出“block__element--modifier”。
结论
在本文中，我们介绍了 npm 包 bem-jsd 的使用方法。通过使用 bem-jsd，我们可以更方便地创建 BEM 类名，从而加快我们的开发速度。希望这篇文章能够对您的工作和学习有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc437b5cbfe1ea0612183