在前端开发中，BEM（块、元素、修饰符）是一种非常流行的命名规范，它可以帮助我们更好地组织和管理 CSS 样式。然而，在编写 BEM 样式时，有时我们需要为一个元素添加一些额外的修饰符，这就需要用到 postcss-add-bem-modifier 这个 npm 包。
什么是 postcss-add-bem-modifier
postcss-add-bem-modifier 是一个基于 PostCSS 的插件，它可以自动为 CSS 中的元素添加 BEM 修饰符。它可以根据所设置的条件来查找元素并添加修饰符，非常便于使用。
安装和使用
安装 postcss-add-bem-modifier 可以通过 npm 进行安装：
npm install postcss-add-bem-modifier
安装完成后，在使用该插件前，需要在 PostCSS 配置文件中进行配置。比如我们可以在项目根目录中新建一个 postcss.config.js 文件，并配置如下：
-- -------------------- ---- -------
-------------- - -
-------- -
-- -------
-------------------------------------
----------- --------
----------------- -----
------------------ -----
------------------ -----
----------------- ---
--
-
-在上述代码中，我们设置了几个参数：
blockClass：BEM 类名中块的前缀，默认为b。elementSeparator：BEM 类名中元素与块之间的分隔符，默认为__。modifierSeparator：BEM 类名中修饰符与块或元素之间的分隔符，默认为--。preserveCamelCase：是否保持驼峰拼写方式，默认为true。defaultNamespace：默认的命名空间，可以在该参数中指定。
配置完成后，我们就可以使用该插件了。下面是一个示例：
.foo {
color: #000;
}上述 CSS 代码可以自动转换为：
.c-block .foo {
color: #000;
}
.c-block .foo--modifier {
color: red;
}上述代码中，我们给 foo 元素添加了一个 modifier 修饰符，自动转换后的类名为 .c-block .foo--modifier。
我们可以在 HTML 中这样使用：
<div class="c-block"> <div class="foo">Hello World</div> <div class="foo foo--modifier">Hello World</div> </div>
你可以看到，.foo--modifier 类名已经被自动添加了，非常方便。同时，你也可以在 JS 中使用该插件，例如使用 webpack：
-- -------------------- ---- -------
----- ------------- - -
-- -------
------- -
------ -
-
----- ---------
---- -
-
------- --------------
--
-
------- ------------
--
-
------- -----------------
-------- -
-------- -
-------------------------------------
----------- --------
----------------- -----
------------------ -----
------------------ -----
----------------- ---
--
-
-
-
-
-
-
-
-结语
通过本文的介绍，相信大家已经掌握了 postcss-add-bem-modifier 的使用方法。使用该插件可以帮助我们更好地编写 BEM 样式，提高代码的可维护性和复用性，让我们可以更快速地完成前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e8381e8991b448dbe12