bem-cn 是一个基于 BEM 命名规范的 JavaScript 库，可以方便地生成和操作 BEM 类名。在前端开发中，BEM 命名规范被广泛应用于 HTML 和 CSS 的模块化开发，经常被使用于大型项目中。本文将介绍如何使用 bem-cn 并提供具体的代码示例。
安装使用
在项目中安装 bemcn，可以通过 npm 包管理器完成安装：
npm install bem-cn
使用时需要引入库并创建一个 bem 实例：
const bem = require('bem-cn');
const block = bem('blockName');其中，'blockName' 是要定义的块的名称，在 bem-cn 中称之为 block，也可以用 'blockName__elemName' 定义一个元素（elem）。例如，如果要创建一个表示文章的块，可以这样写：
const bem = require('bem-cn');
const article = bem('article');生成类名
bem-cn 实例可以生成和操作 BEM 类名。生成类名方法为：
const article = bem('article');
const wholeClass = article(); // 返回 "article"
const elementClass = article('elem') // 返回 "article__elem"
const modifierClass = article({mod: 'yes'}) // 返回 "article article_mod_yes"当传入的是一个对象时，键名作为修饰符名、键值为布尔类型的表达式表示是否应添加此修饰符。
例如，要为 “article” 块添加 “big” 修饰符时，可以这样写：
const bigArticle = article({big: true});
console.log(bigArticle()); // "article article_big"可连写的 BEM 类名
bem-cn 还提供了连写 BEM 类名的方法，例如：
const button = bem('button');
const wholeClass = button();
const defaultStyle = button({style: 'default'});
const activeState = button({state: 'active'});
const largeSize = button({size: 'large'});
const composedClass = button({style: 'default'}, {state: 'active'}, {size: 'large'});通过这种方式，可以轻松生成复杂的类名。
使用 bem-cn 优化代码
使用 bem-cn 可以通过简单代码节省大量时间和精力。代码示例如下：
<div class="block"> <div class="block__elem"></div> <div class="block__elem block__elem_state_disabled"></div> <div class="block__elem block__elem_style_red"></div> <div class="block__elem block__elem_style_red block__elem_state_disabled"></div> </div>
使用 bem-cn：
-- -------------------- ---- ------- ----- --- - ------------------ ----- ----- - ------------- ----- ------- - -------------- ----- --------------- - --------------- ------------- ----- ---------- - --------------- -------- ----- --------------------- - ------------- ------- ------- ------------- ------------------------------------- -- ------ --------------- ---------------------
从代码示例可以看出，使用 bem-cn 将在代码中大幅减少重复和错误的类名生成和手动拼接操作。
总之，bem-cn 是一个方便并且强大的 JavaScript 库，为 BEM 命名规范的使用带来了便利，值得前端开发者使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664a81e8991b448e2644