npm 包 bem-helpers 使用教程

简介

bem-helpers 是一个针对块级修饰符（Block Element Modifier，简称 BEM）标准的 JavaScript 库，为开发者提供了一组有用的 BEM 功能。

BEM 是最常用的 HTML 和 CSS 的命名方式之一。它把 HTML 元素分类成块（block）、元素（element）和修饰符（modifier）三种元素，使得页面更加有结构性和可读性。bem-helpers 对 BEM 命名方式进行了封装，让开发者可以更加方便地在 JavaScript 中使用 BEM。

安装

bem-helpers 可以通过 npm 安装，使用以下命令：

npm install --save bem-helpers

其中 --save 参数是将包信息写入 dependencies 栏。

使用

bem-helpers 包含了一些方法，用于快速生成 BEM 类名：

setBlock(blockName: string, attrs?: object): string

该方法输出一个块级的 BEM 类名字符串。其中，第一个参数是块名，第二个参数是属性对象。例如：

import helpers from 'bem-helpers';

const blockClass = helpers.setBlock('example-block', { mode: 'normal' });

console.log(blockClass); // example-block example-block_mode_normal

输出了 example-block example-block_mode_normal。其中，example-block 是块的基本类名，example-block_mode_normal 是类名的修饰符，attrs 对象映射为 BEM 类名。

setElem(blockName: string, elemName: string, attrs?: object): string

该方法用于生成一个带有元素的 BEM 类名字符串。例如：

import helpers from 'bem-helpers';

const elemClass = helpers.setElem('example-block', 'example-elem', { size: 'medium' });

console.log(elemClass); // example-block__example-elem example-block__example-elem_size_medium

输出了 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 类名字符串。例如：

import helpers from 'bem-helpers';

const elemModClass = helpers.setElemMod('example-block', 'example-elem', 'size', 'medium');

console.log(elemModClass); // example-block__example-elem example-block__example-elem_size_medium

输出了 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 类名字符串。例如：

import helpers from 'bem-helpers';

const blockModClass = helpers.setBlockMod('example-block', 'mode', 'normal');

console.log(blockModClass); // example-block example-block_mode_normal

输出了 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