在前端开发中，特别是在大型项目中，使用 BEM（块、元素、修饰符）命名约定可以帮助我们规范化命名、减少命名冲突，并且使代码更具可读性。然而，BEM 的书写方式比较繁琐，特别是对于新手来说，可能会感到不方便。
因此，开发者开发了一些工具来帮助快速有效地使用 BEM 命名约定，在此介绍一款常用的 npm 包，即 bem-kit。
什么是 bem-kit
bem-kit 是一个快速为 BEM 命名约定生成样式类名称的工具。它遵循原生 CSS 和 SCSS 的书写规范，使用变量和混合器封装了 BEM 命名规则，让“根据 BEM 命名约定编写 CSS”的过程更简便。
如何安装 bem-kit
你可以在命令行中使用 npm 安装 bem-kit：
npm i bem-kit
如何使用 bem-kit
安装完成后，需要在 css 或 scss 文件中引入 bem-kit：
@import 'bem-kit';
该语句将在 your-project/node_modules/bem-kit/src 目录中搜索样式源码。
例如，我们为“header”组件添加样式：
-- -------------------- ---- -------
------- -
-------- ----- -
----------------- -----
-------- -----
-------- --------------- -
---------- -----
-
-------- ------------------- -
----------------- ------
------ -----
-
-------- --------------------- -
----------------- ------
------ -----
-
-
-在这个例子中，我们使用 @include block 创建一个块级样式，然后使用 @include element 和 @include modifier 创建元素和修饰符样式。
@include block的作用是用于添加块元素样式；@include element用于创建块元素内的元素样式，如上例的 logo，输出的样式类名为.header__logo；@include modifier用于创建带有修饰符的样式，输出的样式类名为.header--primary和.header--secondary。
bem-kit 还提供了一些其他的命名封装，如 @include utility 将帮助我们快速编写常用的可复用的样式类。
@include utility('clearfix'); // Outputs .clearfix in your compiled CSSStylelint 集成
bem-kit 与 Stylelint 集成可以有效帮助过滤未正确命名的样式，以确保代码遵循规范。要使用 bem-kit 和 Stylelint 需要遵循以下步骤：
- 安装依赖：
npm i stylelint stylelint-scss stylelint-config-sass-guidelines @namics/stylelint-config-bem-style
- 在项目根目录中创建 .stylelintrc 文件，并添加样式配置：
-- -------------------- ---- -------
-
---------- -
-----------------------------------
------------------------------------
--
-------- -
--------------------- -
-----
-
---------------- ------------ -----
-
--
-------------------- --
---------------------------------- -
-
-- 将 bem-kit 添加到 .stylelintrc 文件中：
-- -------------------- ---- -------
-
---------- -
-----------------------------------
-------------------------------------
---------
--
-------- -
--------------------- -
-----
-
---------------- ------------ -----
-
--
-------------------- --
---------------------------------- -
-
-总结
bem-kit 是一个简单易用的 BEM CSS 命名工具，它可以帮助我们更高效地在项目中应用 BEM 命名约定。使用 bem-kit 不仅可以提高开发效率，还能避免因人工书写样式类名称而引起的错误。我们希望这篇文章能帮助你更好的了解 bem-kit 并在实践中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005751381e8991b448ea392