在前端开发中，CSS 是不可避免的一部分。为了让 CSS 更加模块化、可维护，我们可以采用 BEM（块、元素、修饰符）命名规则来规范代码。而 @mozheng-neal/postcss-bem 这个 npm 包就是专门为 BEM 命名规则而设的，它可以将 CSS 文件转换为严格遵循 BEM 命名规则的样式表。
本篇文章将详细介绍 @mozheng-neal/postcss-bem 的使用方法，包括安装、配置、使用示例等方面。
安装 Postcss-bem
Postcss-bem 是一个 npm 包，因此我们需要先安装它，使用以下命令即可：
npm install @mozheng-neal/postcss-bem --save-dev
为了使用 Postcss-bem，我们还需要同时安装 PostCSS，它是一个 CSS 处理工具集，类似于 Babel 对于 ES6 代码的处理。可以使用以下命令安装：
npm install postcss --save-dev
配置 PostCSS
安装完成后，我们需要配置 PostCSS，以便让它使用 Postcss-bem 进行 CSS 处理。我们可以在项目根目录下创建 postcss.config.js 文件，并添加以下内容：
module.exports = {
plugins: [
require('@mozheng-neal/postcss-bem')
]
}这个配置文件告诉 PostCSS 使用 @mozheng-neal/postcss-bem 这个插件来处理 CSS。
注意：如果还没有安装 PostCSS 的插件，则需要先安装。
使用示例
在 Postcss-bem 安装和配置完成后，我们就可以开始使用它了。下面是一个简单的例子，假设我们有一个 CSS 文件名为 style.css，其内容如下：
-- -------------------- ---- -------
------- -
---------- -----
------------ ----
-
------------- -
-------- -------------
------ -----
------- -----
----------- --------------
-
------------ -
-------- -------------
------------ -----
-
------------------ -
-------- -------------
------------- -----
-
-------------------------- -
------ ----
-这是一个典型的 BEM 命名规则的例子，可以分为以下几部分：
- 块：header
- 元素：logo、nav、item
- 修饰符：active
现在我们想要使用 Postcss-bem 将它们转换为严格遵循 BEM 命名规则的样式表，可以在命令行中输入以下命令：
npx postcss style.css -o dist/style.css
这个命令将使用 Postcss-bem 来处理 style.css 文件，并将处理后的样式表输出到 dist/style.css 中。输出的结果如下：
-- -------------------- ---- -------
------- -
---------- -----
------------ ----
-
------------- -
-------- -------------
------ -----
------- -----
----------- --------------
-
------------ -
-------- -------------
------------ -----
-
------------------ -
-------- -------------
------------- -----
-
-------------------------- -
------ ----
-可以看到，在输出的样式表中，BEM 命名规则都被严格遵循了。
小结
本篇文章介绍了如何使用 @mozheng-neal/postcss-bem 这个 npm 包来转换 CSS 文件，使它们严格遵循 BEM 命名规则。通过本文介绍的安装、配置和使用方法，相信读者已经能够轻松上手 Postcss-bem，并在项目中使用它了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2447f8