随着前端开发的日益发展，前端项目的规模越来越大，css 的管理就成了问题。BEM 是一种流行的 CSS 命名规范，能够帮助我们更好地组织和维护大型项目。为了更好地实现 BEM 与 CSS 的结合，我们可以使用 npm 包 gulp-bem-classes。
什么是 gulp-bem-classes
gulp-bem-classes 是一个自动化工具，能够通过 BEM 的方式生成对应的 CSS 类，同时支持样式文件的压缩和合并。它可以大大减少我们的代码量，并提高项目的可维护性和可扩展性。
安装和使用
要使用 gulp-bem-classes，你需要先安装 gulp 和 gulp-bem-classes，通过 npm 安装即可：
npm install gulp gulp-bem-classes --save-dev
安装完成后，我们需要编写 gulpfile.js 文件，并添加相关代码。下面是一个简单的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -------------------
----- ---------- - -----------------------
----- ------------ - --------------------------
----- ---------- - ----------------------------
---------------- ---------- -
------ ------------------------------
-------------------
-----------------------------------
--------------------- ----------------
--------------------------------
---在以上代码中，我们定义了任务名为 css，使用 gulp.src() 方法来读取源文件，然后通过 bemClasses() 方法来处理 CSS 类，接着使用 gulpConcat() 方法进行合并，使用 gulpIf() 和 gulpCleanCss() 方法来压缩 CSS 文件，并将结果输出到目标文件夹。
接下来，我们可以运行 gulp 命令来执行任务：
gulp css
配置参数
gulp-bem-classes 支持多个参数来配置生成的 CSS 类格式。下面列出了一些常用的参数：
separator
默认值：'--'
用来分隔块、元素和修饰符的分隔符。比如块名为 container，元素为 header，修饰符为 hidden，则使用默认分隔符时，生成的 CSS 类为 container--header，container--header--hidden。
modifierSeparator
默认值：'-'
用来分隔修饰符和属性值的分隔符。比如修饰符为 hidden，属性值为 true，则使用默认分隔符时，生成的 CSS 类为 container__header--hidden。
namespace
默认值：null
如果需要为 CSS 类统一添加命名空间前缀，则可以使用 namespace 参数。比如设置为 my-prefix，则生成的 CSS 类为 my-prefix-container__header。
format
默认值：null
如果需要为 CSS 类按照指定格式输出，则可以使用 format 参数。比如设置为 BEM，则生成的 CSS 类为 .BEM独特性-container__header--hidden。
总结
使用 gulp-bem-classes 能够让我们更好地组织和维护 CSS 代码，减少代码量，提高可维护性和可扩展性。在使用过程中，我们需要学习如何配置参数，并根据项目需求进行灵活运用，从而让项目变得更加高效和优秀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea381e8991b448dc02d