PurgeCSS 不能直接清理 BEM 类名，因其无法识别 JS 动态拼接类名、属性选择器、条件触发状态类及 iframe 注入等场景，需显式配置 extractors、白名单并人工核验。
purgecss 能不能直接清掉 BEM 类名
不能直接信。它会把 .user-card__title--large 当成普通字符串去匹配，但一旦 JS 动态拼接类名（比如 el.classList.add('user-card__title--' + status)），或者用属性选择器如 [class*="__title"]，purgecss 就完全识别不到。更麻烦的是，BEM 里常见状态类如 --loading、--disabled 往往只在特定交互路径下触发，静态扫描根本覆盖不全。
常见误删现象包括：弹窗组件的 .modal__overlay--fade 消失、表单验证的 .input__label--error 不显示、打印样式里的 @media print { .invoice__header--compact { ... } } 被整段干掉。
- 必须显式配置
extractors，尤其要处理 JS 中模板字符串和变量拼接 - 对
@layer或@supports包裹的 BEM 规则，需额外声明keyframes和font-face白名单 - 若项目用了 CSS Modules，
purgecss默认不解析:global()块内的类，得手动加whitelistPatterns
BEM 类名清理前必须人工核验的三个地方
工具扫出来的“未使用”只是起点，不是结论。BEM 的语义耦合性太强，一个类名可能被多个隐式路径调用：
-
data-属性驱动的样式：比如[data-status="pending"] .task-item__badge--pending，purgecss不会抓data-status的值变化 - 伪类与伪元素：
.btn__icon:hover、.card__body:focus-within在静态 HTML 里根本没出现，但用户真实操作中必现 - iframe 或子应用注入：后台管理页某个弹窗 iframe 里用了
.form__submit--primary，主站 HTML 根本不含这个 DOM
建议用 Chrome DevTools 的 Coverage 面板跑一遍核心流程（登录 → 列表页 → 编辑弹窗 → 提交），再比对 purgecss 输出的待删列表 —— 重合部分才可信。
立即学习“前端免费学习笔记（深入）”；
灰度剔除 old- 前缀类的实际操作步骤
别改源码，先加前缀隔离。用 postcss 插件批量重写，而不是全局搜索替换：
- 写一个
postcss插件，匹配所有 BEM 类名（正则/[a-z0-9]+(?:__[a-z0-9]+)?(?:--[a-z0-9]+)/g），给每个匹配结果加old-前缀 - Nginx 日志里加字段记录含
old-的请求：log_format purge '$request_uri $http_referer $request_time';，再用grep "old-" access.log查调用 - JS 层加兜底逻辑：
if (el.classList.contains('old-button')) { console.warn('old-button still used'); }，避免报错中断流程
连续 7 天零日志命中后，再从 Git 历史里 checkout 出该类名最后一次修改的 commit，确认没人动过相关 JS 逻辑，最后执行真实删除。
为什么 BEM 类名不能靠 IDE 自动删
IDE 的“未使用检测”只看当前文件内引用，对 BEM 来说几乎无效。比如 .sidebar__nav 在 Sidebar.css 里定义，但实际用在 Dashboard.js 的 className="sidebar__nav" 字符串里 —— IDE 不会跨语言解析 JSX 字符串内容，更不会理解 __ 是 BEM 元素分隔符。
另一个坑是 classnames 库的动态拼接：className={cx('button', `button--${type}`, { 'button--disabled': disabled })}，IDE 完全无法推断出 button--primary 是否被生成。
真正要定位，得用 grep -r "sidebar__nav" src/ 扫全量代码，再逐个确认是否在构建产物里真实存在，而不是依赖编辑器高亮。
