在前端开发中，BEM（Block-Element-Modifier）是一种常用的命名规范。使用 BEM 规范能够为 HTML 和 CSS 提供更好的组织和管理。在本文中，我们将介绍如何使用 npm 包 next-postcss-bem 来自动化实现 BEM 命名规范。
什么是 next-postcss-bem？
next-postcss-bem 是一个基于 PostCSS 的插件，用于自动化生成 BEM 的 CSS 类名。通过该插件，我们可以自动将 BEM 命名规范应用于我们的 CSS，省去手动编写类名的烦恼。
开始使用 next-postcss-bem
在使用 next-postcss-bem 之前，我们需要安装依赖。可以使用 npm 或 yarn 安装 next-postcss-bem 和 postcss：
npm install next-postcss-bem postcss --save
或者
yarn add next-postcss-bem postcss
安装完依赖之后，我们需要在 postcss.config.js 中进行配置：
-- -------------------- ---- -------
-------------- - -
-------- -
------------------- -
------ ------
----------- -
---------- ----
----------- -----
--------- ----
-
-
-
--在上面的配置中，我们设置 style 为 bem，这表示我们将使用 BEM 命名规范。另外，我们设置了三个分隔符用于分割命名空间、子元素和修饰符。
使用 next-postcss-bem 来生成 CSS 类名
使用 next-postcss-bem 来生成 CSS 类名非常简单。只需要在 CSS 选择器前加上符合 BEM 规范的命名即可。下面是一个示例：
-- -------------------- ---- ------- -- --------- -- ------- - ----------------- ----- - -------------- - ---------- ----- - --------------------- - ---------- ----- -
在上面的示例中，我们应用了 BEM 命名规范。接下来，我们需要使用 next-postcss-bem 来自动生成类名。只需要在页面中引入经过处理的 CSS 文件即可：
// pages/_app.js import "../styles.css";
在上面的代码中，我们使用 import 导入经过处理的 CSS 文件。此时，next-postcss-bem 会自动将 CSS 中的选择器转换成符合 BEM 规范的类名。
使用 next-postcss-bem 来定制类名
有时候，我们需要对生成的类名进行一些自定义的定制，以满足特定的需求。此时，我们可以使用 next-postcss-bem 提供的一些选项来进行配置。
-- -------------------- ---- -------
-------------- - -
-------- -
------------------- -
------ ------
----------- -
---------- ----
----------- -----
--------- ----
--
---------- -
---------- ----
----------- ----
--------- ---
--
-------------- -------
--------------- -----
-
-
--在上面的配置中，我们设置了 shortcuts 选项，用于指定缩写。例如，我们可以使用 component 缩写代替完整的 block 名称。同时，我们还使用了 elementPrefix 和 modifierPrefix 选项来定制前缀。
结语
通过使用 next-postcss-bem，我们可以轻松地实现 BEM 命名规范，并自动生成符合规范的类名。在日常开发中，我们可以充分利用这个工具来提升我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733c890c4f7277583539