在前端开发中，BEM（Block Element Modifier）是一种常见的命名约定，它可以让你的 CSS 更加模块化、重用性更高、易于维护。而 npm 包 bem 的出现则可以更加方便地实现 BEM 命名规范。
什么是 BEM？
BEM 是一种命名约定，可以把页面分解成独立的部件，即块（Block）、元素（Element）、修饰符（Modifier）。它的命名规则是：
- 块（Block）：用两个短横线（--）作为分隔符，例如
.header。 - 元素（Element）：用一个下划线（_）作为分隔符，例如
.header__logo。 - 修饰符（Modifier）：用两个下划线（__）作为分隔符，例如
.header__logo--small。
这种命名规则可以让 CSS 代码更加模块化，使得代码易于组织、理解和维护。
如何使用 npm 包 bem？
npm 包 bem 提供了一个命令行工具，可以让我们更方便地生成 BEM 命名的 CSS 代码。
安装 npm 包 bem
首先，我们需要安装 npm 包 bem，可以通过以下命令进行安装：
npm install -g bem
使用 npm 包 bem
npm 包 bem 的命令行工具主要有两个命令：bem create 和 bem build。
bem create
bem create 命令可以创建一个 BEM 命名的块（Block），例如：
bem create block header
上面的命令会在当前目录下创建一个 header 目录，并生成以下文件：
header/ header.css header.deps.js header.js header.jsdoc.js header.test.js
其中，header.css 是我们需要自己实现的 CSS 文件。
bem build
bem build 命令可以将 BEM 命名的 CSS 文件编译成普通命名的 CSS 文件，例如：
bem build HEADER.BG_color.RED
上面的命令会将 HEADER.BG_color.RED 这个 BEM 命名的 CSS 文件编译成 header__bg-color--red.css。
使用示例
下面是一个具体的使用示例，我们将创建一个 BEM 命名的块（Block），并在其中定义一个元素（Element）和一个修饰符（Modifier）：
bem create block header
然后，我们需要进入 header 目录，编辑 header.css 文件，将以下代码粘贴到文件中：
-- -------------------- ---- ------- -- ----- -- ------- - ----------------- ----- -------- ----- - -- ------- -- ------------- - -------- ------------- --------------- ------- - -- -------- -- -------------------- - ------ ----- -
保存文件后，我们可以使用 bem build 命令将 BEM 命名的 CSS 文件编译成普通命名的 CSS 文件：
bem build HEADER.LOGO_SMALL
上面的命令会将 HEADER.LOGO_SMALL 这个 BEM 命名的 CSS 文件编译成 header__logo--small.css。
最后，在 HTML 中引入编译后的 CSS 文件即可：
<link rel="stylesheet" href="header__logo--small.css">
总结
通过 npm 包 bem，我们可以更加方便地实现 BEM 命名规范。它可以让我们的 CSS 更加模块化，易于组织、理解和维护。在实际开发中，我们可以根据需要使用 bem create 和 bem build 命令来创建和编译 BEM 命名的 CSS 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/78238