NPM 社区提供了大量的前端包，方便我们快速开发。其中一个特别实用的包就是 auto-bem。它可以自动生成 BEM 命名规范的类名，让我们在编写 CSS 的时候更加高效、标准、一致。
下面我们就来详细讲解如何使用 auto-bem 包。
什么是 BEM 命名规范
BEM 是一种前端命名规范，全称是 Block Element Modifier。它主要是为了解决 CSS 的类名重复、层级过深、维护难度高等问题。简单来说，它会将 HTML 元素分成三层：
- Block: 整个 UI 组件的高层抽象，可以理解成 div。
- Element: Block 组件的子元素，用两个下划线连接父级元素和子元素，例如
block__element。 - Modifier: 用以表示状态和行为的标志符，用两个中划线连接组件和状态名或动作，例如
block--modifier。
这种命名规范可以使得我们的类名更加语义化，方便后期维护和协作开发。
为什么要使用 auto-bem 包
虽然 BEM 命名规范能够帮我们规范类名，但是手动编写仍然会消耗我们宝贵的时间和精力。好在 auto-bem 包可以自动生成符合 BEM 命名规范的类名。
这个包会将 HTML 中的类名转化为 BEM 规范，并且支持配置前缀、分隔符等选项。使用 auto-bem 包可以让你的 CSS 更加高效、标准、一致。
如何使用 auto-bem 包
auto-bem 包的使用很简单，只需要按照以下步骤安装和配置即可。这里以 Vue 项目为例，其他前端框架同理。
1. 安装 auto-bem 包
在你的项目中使用以下命令来安装 auto-bem 包：
npm install auto-bem --save-dev
同时，你还需要使用以下命令来安装 postcss 和 autoprefixer，这两个包在后面的配置中会用到。
npm install postcss autoprefixer --save-dev
2. 修改 postcss.config.js
在项目中找到 postcss.config.js 文件，并在该文件中添加以下内容：
-- -------------------- ---- -------
----- ------------ - ------------------------
----- ------- - --------------------
-------------- - -
-------- -
-------------
---------
------------ ------- -- -----
----------------- ----- -- --------
------------------ ----- -- ---------
-------------- ------ -- ---- ---- ----- ----- ------- ----- --
---
--
--其中，autoBem 会将所有的 class 名称转化为 BEM 规范，这里的选项可根据需求自定义。
3. 在 Vue 组件中使用 auto-bem
在 Vue 组件的 <template> 中使用 bem 属性来定义 class 名称即可，例如下面的示例：
-- -------------------- ---- -------
----------
---- ------------------------ -------- ------------
----- ---------------------------------------- -- -- ------------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ------
--
--
--------- -
--------------------------------- -- -- -
------------- - -------------- - ----
---
--
--
---------
------ -------------- -------
------- -
----------------- -----
-------- -----
----------- --- -----
-------- -
------ -----
---------- -----
------- -
------------ -----
-
-
-------- -
--------- ------
---- --
----- --
------ --
-
-
--------在这个示例中，我们使用了 bem 属性来定义 class 名称，并且在 <style> 标签中编写 CSS，auto-bem 会自动将其转化为 BEM 规范的类名。
总结
auto-bem 包可以帮助我们自动生成符合 BEM 命名规范的类名，使得我们在编写 CSS 的时候更加高效、标准、一致。在这篇文章中，我们介绍了 auto-bem 包的使用方法，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005677e81e8991b448e3e31