bem规范与purgecss需形成闭环：bem提供可预测类名结构，purgecss才能精准删除未用样式；动态拼接类名、第三方组件未显式引用、bem不规范、未设白名单是常见失效原因。
移动端H5的CSS体积压不下来，光靠压缩和合并远远不够；必须让BEM规范和PurgeCSS形成闭环——BEM提供可预测的类名结构，PurgeCSS才敢精准删。
为什么PurgeCSS在H5里常失效？
常见错误现象：PurgeCSS 扫完后 CSS 体积几乎没变，或者关键样式被误删（比如 .modal--visible 消失导致弹窗打不开）。根本原因不是配置错，而是 HTML/JS 中的类名引用不可静态分析。
- 动态拼接类名：如
class="card__item--${status}"或el.classList.add('button' + type)，PurgeCSS默认看不到这些运行时生成的类 - 第三方组件库类名未显式声明：比如直接用
<van-button></van-button>，但没在模板中写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-itemblock - 修饰符只表达状态，不混入布局逻辑：避免
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文件中的<template></template>和<style scoped></style>之外的全局样式引用 - 启用
defaultExtractor并强化 BEM 匹配：defaultExtractor: content => content.match(/[\w-/:]+(?，确保能抓到 <code>filter-bar__trigger这类含下划线的完整 token - 白名单必须加
/^data-v-/（Vue 的 scope id）和/^van-/（Vant 等 UI 库前缀），否则 scoped 样式或第三方组件会大面积丢失
上线前必验的两个漏点
即便配置全对，H5 页面仍可能因移动端特有行为漏掉样式：下拉刷新、路由懒加载后的动态组件、IntersectionObserver 触发的懒渲染区块。
- 用 Puppeteer 启动真实 WebView，执行滚动到底部 + 点击所有可交互区域，再跑一遍
PurgeCSS分析，比纯静态扫描准得多 - 在
vite.config.ts或webpack.config.js中开启safelist: [/^page-/, /^toast-/]，把页面级容器类和轻提示类设为永久保留，避免首屏白屏
最易被忽略的是：BEM 的 block 边界一旦模糊（比如把整个首页当一个 home block），PurgeCSS 就失去裁剪依据；它不是越用力配置越有效，而是越清晰定义 block，越敢删。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
