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