介绍
在前端开发过程中，我们经常使用 BEM 命名规范来管理 CSS 样式，以保证代码可读性和可维护性。但是，手动去添加 BEM 的类名很容易出错，尤其是在开发大型项目时。这时候，我们需要一个能自动生成符合 BEM 规范的类名的工具，因此 postmask-auto-bem 这个 npm 包就应运而生。
postmask-auto-bem 是一个基于 postcss 的插件，用于自动将 CSS 代码中的选择器转换为符合 BEM 规范的类名，从而提高开发效率和代码质量。
安装
你可以通过 npm 安装 postmask-auto-bem：
npm install postmask-auto-bem --save-dev
使用
1. 引入插件
在你的项目中，你需要引入 postmask-auto-bem 插件，并将其作为 postcss 的一个插件配置。
const postcss = require('postcss')
const postcssBem = require('postmask-auto-bem')
// postcss 配置
const processor = postcss([
postcssBem()
])2. 写代码
在你的 CSS 中，你可以不再写繁琐复杂的 BEM 类名，例如：
.block {
&__element {
color: red;
}
&--modifier {
color: blue;
}
}现在，你可以写出结构更为简洁的代码，例如：
.block {
.element {
color: red;
}
.modifier {
color: blue;
}
}3. 使用插件
当你的项目需要自动添加符合 BEM 规范的类名时，你只需要启用 postmask-auto-bem 插件。例如：
const transformedCss = await processor.process(YOUR_CSS_STRING, { /* options */ })参数
1. namespace
你可以通过 namespace 参数来自定义你的 BEM 命名空间，当你需要在同一个项目中使用多个不同 BEM 命名空间时，这个参数尤其有用。默认情况下，命名空间为 ''。
-- -------------------- ---- ------- -- -------- ------------ ---------- -------------- -- -- ----------- ---- ------------------- -- ---------------------------- -- ----------------------------- --
2. elementPrefix
你可以通过 elementPrefix 参数来设置 BEM 元素的默认前缀，默认情况下为 __。
-- -------------------- ---- ------- -- -------- ------------ -------------- --- -- -- ----------- ---- ------ - --------- -- -
3. modifierPrefix
你可以通过 modifierPrefix 参数来设置 BEM 修改器的默认前缀，默认情况下为 --。
-- -------------------- ---- ------- -- -------- ------------ --------------- --- -- -- ----------- ---- ------ - -------- -- --------- -- -
总结
通过使用 postmask-auto-bem 这个 npm 包，你可以轻松地将普通的 CSS 代码转换为符合 BEM 规范的类名。这不仅可以提高开发效率，还能使你的代码更易于管理和维护。如果你正在开发一个大型的前端项目，肯定会受益于使用 postmask-auto-bem 这个工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005679081e8991b448e3ecd