BEM本身不提升Tree Shaking效率，CSS因无ES模块导出语义而无法被Tree Shaking处理；真正起作用的是PurgeCSS等基于类名匹配的工具，BEM的扁平命名仅使其识别和剔除未用样式更准确、更安全。
BEM 本身不提升 Tree Shaking 效率，CSS 文件根本无法被 Tree Shaking 处理——这是个常见误解。 真正起作用的是 PurgeCSS 或 UnoCSS 这类基于类名匹配的工具，而 BEM 的扁平命名只是让它们更容易、更安全地识别和剔除未用样式。
为什么 CSS 不能被 Tree Shaking？
Tree Shaking 是 Webpack/Rollup 对 ES Module 的静态分析机制，依赖 import/export 的可追踪性。CSS 没有导出语义，import './styles.css' 被视为纯副作用导入，打包器默认整文件保留，完全不解析里面哪些选择器被用了、哪些没用。
你看到的“BEM 提升 Tree Shaking”，其实是误把 PurgeCSS 的效果归给了 BEM —— BEM 只是让 PurgeCSS 的匹配更准、误删更少。
PurgeCSS 如何配合 BEM 安全剔除修饰符（如 button--large）
BEM 的 --modifier 类名（如 card--shadow-heavy）极易残留：它们常被定义但从未在模板中出现。PurgeCSS 是唯一能系统清理它们的方案，但需注意配置细节：
-
content路径必须覆盖所有模板来源，漏掉./src/**/*.tsx或./public/index.html会导致大量误删 - BEM 类名含双下划线和双短横（如
header__title--large），默认正则/[\w-/:]+(? 会截断匹配，建议换用defaultExtractor或社区 extractor（如@fullhuman/postcss-purgecss的extractors配置） - 动态拼接的修饰符（如
clsx(`${block}--${size}`)）必须用safelist显式保留：safelist: [/--(small|medium|large)/] - 第三方库的 BEM 类（如
react-datepicker__day--selected）要加进whitelistPatterns，否则直接消失
开发环境别开 PurgeCSS，否则热更新失效
在 postcss.config.js 中务必用环境变量控制：
plugins: [
process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.html', './src/**/*.tsx'],
safelist: [/^data-v-/],
})
].filter(Boolean)
否则开发时改了 JSX 的 className，样式不会实时更新——因为 PurgeCSS 已经把刚写的新类名删掉了。
真正关键的不是“BEM 写法”，而是确保 PurgeCSS 能 100% 看到所有实际渲染的类名字符串；任何模板外的类名注入（比如服务端渲染漏传、运行时 JS 拼接、Web Component 的 shadow DOM）都会让它失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
