什么是 bems
BEM 是块（block）、元素（element）、修饰符（modifier）的缩写，是一种前端 CSS 架构样式命名规范。这个规范约定了如何为页面和组件命名，以及如何结构化 CSS 类。而 bems 则是一个简单的，可以自动生成 BEM CSS 类的库。
怎么使用 bems
安装 bems
首先打开命令行工具，输入以下命令进行 bems 的安装：
npm install bems --save-dev
导入 bems
在你的项目中引入 bems，以便在代码中使用：
var bems = require('bems');或者，在 ES6 中使用 import：
import bems from 'bems';
配置 bems
通过配置 bems，你可以自定义元素的命名方式、格式、修饰符的类名前缀。
以下是一个示例配置：
bems.config({
elementSeparator: '__',
modifierSeparator: '--',
noElementPrefix: true,
noModifierPrefix: false
});解释：
elementSeparator：元素的分隔符，默认是“__”。modifierSeparator：修饰符的分隔符，默认是“--”。noElementPrefix：是否使用块名前缀，默认是 false，即会使用块名作为元素前缀。noModifierPrefix：是否使用块名和元素名（如果有）作为修饰符前缀，默认是 true，即仅使用修饰符分隔符作为前缀。
使用 bems
使用 bems 的方法有很多，下面是一个示例：
var block = bems('my-component');
var element = block('my-element');
var modifier = element({ active: true });
var className = modifier('modifier');
console.log(className); // 输出：my-component__my-element--active__modifier解释：
通过调用 bems() 方法，创建一个块对象。块名可以是任意的字符串，通常是你的组件名或者一个页面区块的名字。
通过调用块对象（例如 block('my-element')），可以创建元素对象。元素名只能是合法的 HTML class 名。在这个例子中，它是 “my-element”。
通过调用元素对象（例如 element({ active: true })），可以创建修饰符对象。修饰符可以是任意的，也可以是一个 key 值的 Object，键为修饰符类名，值为布尔标志。
最后，通过调用修饰符对象（例如 modifier('modifier')）即可生成带有修饰符的类名。
使用 bems 的好处
使用 bems 可以帮助我们完成如下几件事情：
- 约束 CSS 类命名的规范性。
- 自动化生成类名，避免了手写类名的繁琐和容易出错。
- 通过 BEM 三要素的划分，更清晰、精准地描述文档节点之间的含义关系，方便后期维护和修改。
总结
使用 bems 工具可以帮助我们统一命名规范，避免把样式与组件耦合在一起的问题。同时，bems 还可以让我们减少手写样式的工作量，提高开发效率。大家可以结合实际项目情况使用，感受一下 bems 带来的好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551f481e8991b448cf77b