随着前端技术的发展和变化，越来越多的开发者开始使用 BEM（块/元素/修饰符）的命名规范来管理 CSS 样式。然而，手写 BEM 需要花费大量时间和精力。这时候一个 npm 包 zero-bem 就派上用场了。Zero-bem 可以为你自动生成 BEM 的类名，使你的前端代码更简洁。
安装
npm install zero-bem --save-dev
使用
通过 zero-bem，你可以轻松地使用 BEM 规范来管理 CSS 类。它提供了构造器函数，从而能够直接生成 BEM 类名。以下是一个基本的示例，生成块的 BEM：
const bem = require('zero-bem');
// 传入块名称 'block'
const b = bem('block');
// 输出块类名 'block'
console.log(b()) // 输出：'block'zero-bem 构造器函数接受一个参数，即块名称。在上述示例中，块名称是 'block'。你可以通过执行 b() 来获取该块的类名。
生成元素类名
接下来让我们将元素添加到块中，生成完整的 BEM：
// 传入块名称 'block' 和元素名称 'element'
const b = bem('block__element');
// 输出块类名 'block'
console.log(b()) // 输出：'block__element'注意，块和元素使用双下划线 '__' 分隔。
生成修饰符类名
BEM 还允许使用修饰符控制块或元素的表现。下面我们来看一下如何添加一个修饰符：
// 传入块名称 'block' 和元素名称 'element'，以及修饰符名称 'modifier'
const b = bem('block__element_modifier');
// 输出块类名 'block'
console.log(b()) // 输出：'block__element block__element_modifier'注意，修饰符使用单下划线 '_' 分隔。
你也可以使用对象传入多个修饰符，每个修饰符的 key 是修饰符名称，value 是 boolean 类型的值，表示是否添加该修饰符。看下面的例子：
// 传入块名称 'block' 和元素名称 'element'，以及两个修饰符 'modifier1' 和 'modifier2'
const b = bem('block__element', {
'modifier1': true,
'modifier2': false, // 不添加此修饰符
});
// 输出元素类名 'block__element block__element_modifier1'
console.log(b()) // 输出：'block__element block__element_modifier1'示例
下面是一个示例，展示如何使用 zero-bem。
-- -------------------- ---- -------
---- ---- -- ---
---- -------------
---- ------------------------
---- ----------------------
--- ------------------ ------------------------
-- ------------------------------
-- -------- -----------------------
------
-------- -------------------- ---- ------- -- -- -- ----- - ----------------- ----- -------- ------- - ---------- - ----------------- ----- ------- ------ - -------------- - -------- ----- --------------- ------- ---------------- -------------- -------- ------- - ------------ - ---------- ------- -------------- -- - ------------------ - ---------- ----- - ------------------ - ----------- -- -------------- ------- - ----------- - -------- ------------- ----------- ------- -
使用 zero-bem 可以让我们更轻松地管理类名，使得 CSS 代码也变得更加清晰简洁：
-- -------------------- ---- ------- ----- --- - -------------------- ----- - - ------------ ----- ---- - ----------------- ----- -------- - --------------------- ----- ------ - ------------------- ----- ------------ - ------------------------- ----- ----- - ------------------ -- ---------- ------ ------------ ----- --------- - --------------------------------------- --------------------- - ------ -------- ----------------------------------------- ----- -------- - -------------------------------------- ------------- - ---- -------------------- - ------- --------------------------------
总结
使用 zero-bem 可以更轻松地管理类名，使得前端代码变得简洁而又可维护。虽然 zero-bem 的用途可能有限，但它可以是代码更整洁，并降低编写 BEM 类名的出错率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733d890c4f727758357b