在前端开发中，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 包 bem
npm 包 bem 的命令行工具主要有两个命令：bem create 和 bem build。
bem create
bem create 命令可以创建一个 BEM 命名的块（Block），例如：
--- ------ ----- ------
上面的命令会在当前目录下创建一个 header 目录，并生成以下文件：
------- ---------- -------------- --------- --------------- --------------
其中，header.css 是我们需要自己实现的 CSS 文件。
bem build
bem build 命令可以将 BEM 命名的 CSS 文件编译成普通命名的 CSS 文件，例如：
--- ----- -------------------
上面的命令会将 HEADER.BG_color.RED 这个 BEM 命名的 CSS 文件编译成 header__bg-color--red.css。
使用示例
下面是一个具体的使用示例，我们将创建一个 BEM 命名的块（Block），并在其中定义一个元素（Element）和一个修饰符（Modifier）：
--- ------ ----- ------
然后，我们需要进入 header 目录，编辑 header.css 文件，将以下代码粘贴到文件中：
-- ----- -- ------- - ----------------- ----- -------- ----- - -- ------- -- ------------- - -------- ------------- --------------- ------- - -- -------- -- -------------------- - ------ ----- -
保存文件后，我们可以使用 bem build 命令将 BEM 命名的 CSS 文件编译成普通命名的 CSS 文件：
--- ----- -----------------
上面的命令会将 HEADER.LOGO_SMALL 这个 BEM 命名的 CSS 文件编译成 header__logo--small.css。
最后，在 HTML 中引入编译后的 CSS 文件即可：
----- ---------------- -------------------------------
总结
通过 npm 包 bem，我们可以更加方便地实现 BEM 命名规范。它可以让我们的 CSS 更加模块化，易于组织、理解和维护。在实际开发中，我们可以根据需要使用 bem create 和 bem build 命令来创建和编译 BEM 命名的 CSS 文件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/78238