搜card__header能精准定位死代码，因其bem命名自带作用域锚点，仅匹配card block内html、css、js三处，且需开启whole word、match case、关闭regex方可准确搜索。
因为BEM类名自带作用域锚点，搜 card__header 就只命中 card Block 下的代码，不会误触 modal__header 或 user-profile__header——前提是命名规范、搜索配置对。
为什么搜 card__header 能直接定位死代码
BEM把组件边界写进名字里：card__header 只可能出现在三处：HTML模板中位于 card 容器内的元素、CSS文件里以 .card__header 开头的规则、JS中通过 el.classList.add('card__header') 动态添加的地方。它天然不具备跨Block传播能力。
- 传统命名如
header或card-header会被散落在十几个文件里，grep结果要人工筛半天 -
card__header--large可搜，但若某处硬写了header-large，工具就完全看不见 - 只要组件下线，所有以
card__和card--开头的类名都可被整体标记为候选清理项
VS Code / grep 搜索必须开的三个开关
不开对参数，再规范的BEM也白搭：
- 勾选 Whole Word（全字匹配）：避免
card__header匹配到card__header--highlighted或my-card__header - 勾选 Match Case（区分大小写）：BEM常用
kebab-case，search-form__input和SearchForm__input是两回事 - 关闭 Regex（正则模式）：除非你明确要查
card__.*--active这类变体；连字符结构本身适合字面量搜索，开正则反而易误匹配
purgecss 配置不加 extractor 就会漏掉 BEM 类
purgecss 默认不认识 __ 和 -- 是BEM语义分隔符，不配置就会：
- 把
button--disabled当成普通字符串漏掉 - 把
icon从button__icon里切出来，误判为独立类名 - 正确做法是在
content配置中启用extractors，专门匹配__[a-z]和--[a-z]模式
示例配置片段（PostCSS + purgecss）：
extractors: [
{
extractor: class extends PurgeCSS.PostCSSExtractor {
static get regexes() {
return [/__[a-z0-9-]+/g, /--[a-z0-9-]+/g];
}
},
extensions: ['css', 'scss', 'sass', 'less', 'styl']
}
]
删之前必须确认 JS 是否硬编码了这个类名
BEM类名看似孤立，但JS里可能有隐性依赖：
-
el.classList.add('button--disabled')✅ 合法，且能被purgecss捕获 -
el.className += ' disabled'❌ 危险——这个disabled不属于任何 Block，无法被工具识别，也容易误删其他地方的同名类 - 检查 CSS Modules 是否导出：
import styles from './Button.module.scss'; console.log(styles['button--loading'])—— 如果有，说明这个修饰符被 JS 显式消费，不能只看 HTML 是否还用它 - 留意第三方库封装层：比如 Ant Design 的
Button内部用了ant-btn-primary，你项目里写的.button--primary和它无关；但若写了.ant-btn__icon这种强行套BEM的类，则既不生效又污染统计结果
真正容易被忽略的是：BEM只管命名，不管谁覆盖谁。修饰符叠加、状态类混用、CSS引入顺序混乱——这些才是大规模重构中最卡死的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
