简介
bem-helpers 是一个针对块级修饰符（Block Element Modifier，简称 BEM）标准的 JavaScript 库，为开发者提供了一组有用的 BEM 功能。
BEM 是最常用的 HTML 和 CSS 的命名方式之一。它把 HTML 元素分类成块（block）、元素（element）和修饰符（modifier）三种元素，使得页面更加有结构性和可读性。bem-helpers 对 BEM 命名方式进行了封装，让开发者可以更加方便地在 JavaScript 中使用 BEM。
安装
bem-helpers 可以通过 npm 安装，使用以下命令：
--- ------- ------ -----------
其中 --save 参数是将包信息写入 dependencies 栏。
使用
bem-helpers 包含了一些方法，用于快速生成 BEM 类名：
setBlock(blockName: string, attrs?: object): string
该方法输出一个块级的 BEM 类名字符串。其中，第一个参数是块名，第二个参数是属性对象。例如：
------ ------- ---- -------------- ----- ---------- - --------------------------------- - ----- -------- --- ------------------------ -- ------------- -------------------------
输出了 example-block example-block_mode_normal。其中，example-block 是块的基本类名，example-block_mode_normal 是类名的修饰符，attrs 对象映射为 BEM 类名。
setElem(blockName: string, elemName: string, attrs?: object): string
该方法用于生成一个带有元素的 BEM 类名字符串。例如：
------ ------- ---- -------------- ----- --------- - -------------------------------- --------------- - ----- -------- --- ----------------------- -- --------------------------- ---------------------------------------
输出了 example-block__example-elem example-block__example-elem_size_medium。其中，example-block__example-elem 是包含元素的 BEM 基本类名，example-block__example-elem_size_medium 是带有修饰符的 BEM 类名。
setElemMod(blockName: string, elemName: string, modName: string, modValue: string): string
该方法用于生成一个带有元素修饰符的 BEM 类名字符串。例如：
------ ------- ---- -------------- ----- ------------ - ----------------------------------- --------------- ------- ---------- -------------------------- -- --------------------------- ---------------------------------------
输出了 example-block__example-elem example-block__example-elem_size_medium。其中，example-block__example-elem 是包含元素的 BEM 基本类名，example-block__example-elem_size_medium 是带有修饰符的 BEM 类名。
setBlockMod(blockName: string, modName: string, modValue: string): string
该方法用于生成带有块级修饰符的 BEM 类名字符串。例如：
------ ------- ---- -------------- ----- ------------- - ------------------------------------ ------- ---------- --------------------------- -- ------------- -------------------------
输出了 example-block example-block_mode_normal。其中，example-block 是块的基本类名，example-block_mode_normal 是带有块级修饰符的 BEM 类名。
总结
bem-helpers 提供了一组有用的 BEM 功能，方便开发者在 JavaScript 中生成 BEM 类名。这篇文章介绍了 bem-helpers 包含的API，并附带了相应的示例代码。希望这篇文章对你有所启发，可以帮助你更好地使用 bem-helpers。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600574e981e8991b448ea315