BEM与PurgeCSS优化H5CSS体积实战

移动端H5的CSS体积优化不能只依赖压缩合并，关键在于让BEM命名规范与PurgeCSS形成精准协同的闭环：BEM提供结构清晰、可静态分析的类名（如block__elem--mod），使PurgeCSS能安全识别并删除未使用样式；而动态拼接类名、第三方组件未显式引用、BEM不规范、白名单缺失等常见问题，正是导致PurgeCSS失效或误删的核心原因——只有严格统一block边界、约束修饰符语义、配合postcss-bem自动生成、强化扫描配置并覆盖真实运行时场景（如懒加载、下拉刷新），才能真正把冗余CSS“敢删、删准、删净”。

移动端H5的CSS体积压不下来，光靠压缩和合并远远不够；必须让BEM规范和PurgeCSS形成闭环——BEM提供可预测的类名结构，PurgeCSS才敢精准删。

为什么PurgeCSS在H5里常失效？

常见错误现象：PurgeCSS 扫完后 CSS 体积几乎没变，或者关键样式被误删（比如 .modal--visible 消失导致弹窗打不开）。根本原因不是配置错，而是 HTML/JS 中的类名引用不可静态分析。

• 动态拼接类名：如 class="card__item--${status}" 或 el.classList.add('button' + type)，PurgeCSS 默认看不到这些运行时生成的类
• 第三方组件库类名未显式声明：比如直接用 ，但没在模板中写 class="van-button"，PurgeCSS 就不会保留其样式
• BEM 类名不规范：写了 .card-item 而非 .card__item，插件无法识别为 BEM 模式，也就没法利用 block 边界做安全裁剪
• 没启用 variables 或 keyframes 白名单：动画类 @keyframes slideIn 或 CSS 变量 --card-shadow 若未声明，会被连带清除

如何让BEM真正帮上PurgeCSS的忙

BEM 不是给设计师看的命名装饰，它是给构建工具喂的「结构化饲料」。只有当类名严格遵循 block__elem--mod 格式，PurgeCSS 才能区分哪些是真实组件类、哪些是临时工具类或遗留类。

• 所有新组件必须从 block 开始定义，且 block 名与文件路径对齐：比如 src/components/FilterBar/FilterBar.vue 对应 filter-bar，内部只用 filter-bar__trigger、filter-bar--expanded
• 禁止跨 block 复用 element 名：不能把 list__item 直接塞进 card 里，要写成 card__list-item 或单独抽 list-item block
• 修饰符只表达状态，不混入布局逻辑：避免 button--primary-margin-left-20 这种“一义多职”类名，否则 PurgeCSS 会因无法推断使用场景而保守保留
• 配合 postcss-bem 插件自动生成类名，在 SCSS 中写 .filter-bar { &__trigger { } &--expanded { } }，编译后自动产出合规类名，减少手误

PurgeCSS 配置必须改的三项

默认配置对 H5 场景太宽松，尤其在 Vue/React 单页应用中，需针对性收紧并扩大扫描范围。

• 显式声明 content 入口：content: ['./src/**/*.{vue,js,ts,html}']，特别注意包含 .vue 文件中的