npm 包 bem-jsd 使用教程

在前端开发中，BEM (Block Element Modifier) 作为一种组织 CSS 类名的方法已经越来越流行了。但是在实际使用中，手动编写 BEM 类名还是太过麻烦，给开发带了很大的麻烦。为此，开发人员开发了很多 BEM 工具来简化这个过程，其中一个比较好的工具就是 bem-jsd。npm 包 bem-jsd 是一个用于创建 BEM 类名的 JavaScript 库。它可以帮助开发人员更方便地创建 BEM 类名，从而加快开发速度。下面是详细的使用教程。

安装

首先，我们需要安装 bem-jsd。在终端中输入以下命令即可：

npm install bem-jsd --save-dev

初始化

在使用 bem-jsd 之前，我们需要先在我们的 JavaScript 代码文件中导入该库。导入操作如下：

import bem from 'bem-jsd';

使用方法

一旦我们成功导入了 bem-jsd，就可以使用该库的方法来创建 BEM 类名了。

创建 Block 名称

使用 bem.create() 方法来创建 Block 名称。下面是一个使用 bem.create() 方法的示例代码：

let block = bem.create('block');
console.log(block);

上面的代码将输出“block”。

创建 Element 名称

要创建 Element 名称，我们需要使用 Block 的实例来调用其 elem() 方法。下面是一个使用 elem() 方法的示例代码：

let block = bem.create('block');
let element = block.elem('element');
console.log(element);

上面的代码将输出“block__element”。

创建 Modifier 名称

如果我们需要创建 Block 或者 Element 的 Modifier 名称，我们可以使用 Block 或 Element 的实例来调用其 mod() 方法。下面是一个使用 mod() 方法创建 Block Modifier 名称的示例代码：

let block = bem.create('block');
let modifier = block.mod('modifier');
console.log(modifier);

上面的代码将输出“block--modifier”。

创建混合名称

有时候，我们需要把一个 Block 或 Element 的 Modifier 添加到它的 Element 上。我们可以使用 Block 的实例来调用其 elem() 方法来创建 Element 名称，并使用 Element 的实例来调用其 mod() 方法来创建 Modifier 名称。下面是一个使用混合名称的示例代码：

let block = bem.create('block');
let element = block.elem('element');
let modifier = element.mod('modifier');
console.log(modifier);

上面的代码将输出“block__element--modifier”。

结论

在本文中，我们介绍了 npm 包 bem-jsd 的使用方法。通过使用 bem-jsd，我们可以更方便地创建 BEM 类名，从而加快我们的开发速度。希望这篇文章能够对您的工作和学习有所帮助。

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