在前端开发中，CSS 命名是一个很重要的话题，一个良好的命名规范能够帮助我们更好地维护代码。而 BEM（Block Element Modifier）命名方法已经被广泛使用。
为了更好地管理 CSS 类名，我们可以使用 npm 包 superbem，它是一个基于 BEM 命名的 CSS 类名生成器，支持多语言以及自定义规则。本文将向你介绍 superbem 的使用方法。
安装和导入
在终端中使用以下命令安装 superbem：
npm install superbem
然后在你的代码中导入 superbem：
import superbem from 'superbem';
示例代码分析
我们来看一个示例代码来了解 superbem 的使用：
<div class="button button--color-primary button--size-large"> <span class="button__icon button--position-left"></span> Click me </div>
这是一个使用 BEM 命名方法的按钮组件，由 button 和 button__icon 两个块组成，同时 button 还包含 color 和 size 两个修饰符。
我们可以使用 superbem 来生成这些类名。首先编写一个模板，模板中的字母 b、i、m 分别表示块、修饰符和元素。
const bem = superbem('b i--m i--m');生成的 bem 函数接收一个字符串类型的块名，和一个可选的对象参数，对象中包含可用的修饰符和元素：
const buttonBem = bem('button', {
color: ['primary', 'secondary'],
size: ['large', 'small'],
icon: ['position-left', 'position-right']
});
const iconBem = bem('button__icon');这段代码将会生成：
buttonBem('color-primary size-large');
// -> "b b--color-primary b--size-large"
iconBem('position-left');
// -> "b__i b__i--position-left"生成类名的顺序如下：
- 先生成块名 'b'
- 生成对应元素名 '__m', 如果没有元素名，则忽略该步骤
- 给块名添加修饰符 'b--m'
- 生成对应元素的修饰符 'b__i b__i--m'
深入了解
多语言支持
我们可以使用一个数组来表示不同语言的类名，例如：
const bem = superbem(['block', 'блок']);
const buttonBem = bem('button');当多语言参数被传入时，生成的类名将会逐个根据语言进行生成，例如：
buttonBem(); // -> "block" // -> "блок"
这将会让我们的代码更易于维护。
自定义规则
除了默认的规则外，我们还可以使用自定义规则。例如：
-- -------------------- ---- -------
----- --- - ----------
------ ---------
---- ------
--------- ----
-------- -----
-------- ---
---
----- --------- - ------------- -
---------- -----
--------- ------
----- -
----------- ----
-
---这将会生成以下类名：
-- -------------------- ---- ------- ----------------- - -- ---- ------ -- - -------------------- - -- ---- ------ -- - ------------------------ - -- ---- ------ -- -
在这个例子中，我们重载了块名、修饰符前缀和元素分隔符等参数，让我们可以轻松地为组件编写自定义的类名。
链式调用
superbem 采用了函数式编程的风格，我们可以通过链式调用来生成类名。例如：
const bem = superbem();
const buttonBem = bem('button').mod('color-primary').mod('size-large');
const iconBem = bem('button__icon').mod('position-left');可以这样方便的添加修饰符。
继承
我们可以使用 inherit 方法从一个已有的 bem 函数中继承规则，例如：
-- -------------------- ---- ------- ----- --- - ---------- ------ --------- ---- ----- --------- ---- -------- ---- --- ----- -------------- - ------------------------ ----- ------------ - ------------------------------------------
这将会生成以下类名：
.button--size-large {
/* some styles */
}
.button--size-large--color-red {
/* some styles */
}当我们想要编写一些变体（variant）时，这会更加方便。
总结
superbem 是一个非常实用的工具，它能够帮助我们更好地组织和管理 CSS 类名。通过本文的介绍，你应该已经学习到了 superbem 的基本使用方法，以及它的一些高级用法，希望这篇文章能够对你的前端开发工作有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630081e8991b448e0d44