在前端开发中，BEM（Block Element Modifier）是一种流行的方法论，它让我们通过统一的命名规则来组织 HTML 和 CSS 代码。而 csbem 这个 NPM 包则是 BEM 命名规则的一种实现，它可以自动生成类名，并便于在 JS 中调用。本文将详细介绍 csbem 的使用方法，并提供示例代码。
安装
首先，我们需要使用 npm 命令行工具来安装 csbem 包。可以在项目的根目录下运行以下命令：
--- ------- ------ -----
这将在项目的 node_modules 目录下安装 csbem 包，并将其添加到 package.json 文件的 dependencies 中。
使用
安装完 csbem 就可以通过 import 或 require 的方式在项目中调用了。csbem 的主要功能是自动生成类名，它提供了两种调用方式：函数调用和模板字符串调用。
函数调用
函数调用的语法如下：
------ ----- ---- -------- ----- --------- - ------------------ ------------ -------------
在这个例子中，我们通过 bem 函数传入块（block）、元素（elem）以及两个修饰符（modifier1 和 modifier2），并自动合并生成类名 block__elem block__elem--modifier1 block__elem--modifier2，然后可以将其赋给变量 elemClass。可以使用 elemClass 来标记 HTML 中的元素或选择器等其他用途。
模板字符串调用
模板字符串调用方式类似于函数调用，但是使用了 ES6 模板字符串的语法。语法如下：
------ ------ ---- -------- ----- --------- - ---------------- --------- -----------
这里使用了 CSBEM 工具的特殊空格替换语法。与函数调用类似，也是将块、元素和修饰符参数传入 bemt 模板字符串中，然后将结果自动合并形成类名。在这个例子中，elemClass 等于 block__elem block__elem--modifier1 block__elem--modifier2。
状态修改
我们还可以在元素的类名中使用伪类（pseudo-class）和伪元素（pseudo-element）的状态，这可以通过在块、元素和修饰符参数之后传递状态（state）参数来实现。例如：
------ ------ ---- -------- ----- --------- - ---------------- -----------
在这里，我们在类名后面添加了 is-active 状态，这将自动合并到生成的类名中。在 CSS 中，我们可以这样使用它：
---------------------- -
----------------- -----
-区块封装
在 BEM 中，块（Block）是一个用于封装 HTML / CSS 片段的独立实体，这允许我们使用相同的类名在项目的不同部分甚至不同项目中重用代码。因此，在 csbem 中，我们可以使用 block 函数来创建块级别的 CSS 类。
------ ------- ---- -------- ----- ------- - ------------------ -- ------- ----- ------------ - ---------------------- -- -------- --------------- -- ----------- ----- ------------------------ - ---------------------- -- -------- ---------------- -- ------------ ----- ---------------- - --------------------- ---------- -- --------------- -----------------------
在这个例子中，我们使用 block 函数创建了一个名为 my-block 的块级别的 CSS 类，然后使用 elem 和 mod 方法创建不同类型的类名（块、元素、修饰符）。可以将这些类名应用于 HTML 中的元素或选择器等其他用途，以确保样式本地化。
辅助方法
CSBEM 工具还提供了一些辅助方法来帮助我们生成类名，例如：
- arr(...)：将数组中的所有元素合并为一个类名。
- compose(...)：将多个类名组合成一个。
- useClassnames(...classNames)：共同使用类名的常见模式的快捷方法。
------ ----- -------- -------------- ---- --------
-- ----------------
----- ------- - ----------- ------ --------
-- --- --- ---
-- ----------
----- ------------- - -------------- ------ -------
-- --- --- ---
-- ----------------
----- ------------------- - -
---- -----
---- ------
---- ----
-
----- ---------------- - --------------------------- ---------------------
-- ---------- --------------- ---------------总结
在本文中，我们详细介绍了 csbem 包的使用方法，这是一种基于 BEM 命名规则实现的自动生成 CSS 类名的 NPM 包。我们介绍了两种调用方式（函数调用和模板字调用），以及 csbem 的其他辅助方法。通过使用 csbem 包，我们可以更轻松地遵循 BEM 命名规则，使我们的项目更易于维护和扩展。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005725a81e8991b448e87c4