BEM本身不会增大CSS体积，真正导致体积增加12%～30%的是修饰符滥用、@extend误用及PurgeCSS配置不当；应限定修饰符为语义明确的有限集合（如button--primary），尺寸颜色等交由CSS自定义属性控制，并确保修饰符与block类共存以支持tree-shaking。
直接说结论：BEM本身不会增大CSS体积，真正让体积涨起来的是修饰符（--modifier）滥用、@extend误用、以及没配好PurgeCSS——这三者加起来，能让CSS多出12%～30%的无效规则。
为什么button--size-sm和button--size-md会让CSS变大
这不是BEM的问题，是把像素级差异当语义在写。每个--size-sm、--size-md都对应一条独立CSS规则，哪怕只差4px，构建工具也得存两条声明。
- 浏览器无法合并它们，压缩工具（如cssnano）也很难识别这种数值微差
- Spotify实测显示，这类修饰符每多一个，CSS体积平均增加1.8%～2.3%
- 真正该保留的修饰符只有语义明确、互斥、可枚举的有限集合，比如：
button--primary、button--disabled、input--error - 尺寸、颜色、圆角等可变量，应交给CSS自定义属性控制，HTML里只留
button一个类名
为什么用了@extend反而让CSS更胖
@extend和BEM逻辑冲突：BEM靠类名独立来支撑tree-shaking与PurgeCSS，而@extend会把占位符样式复制进多个选择器，导致规则重复爆炸。
- 写
.card__title {@extend %text-emphasis;}和.list__item {@extend %text-emphasis;}，最终生成两份完全相同的声明块 - 如果%text-emphasis含
&:hover或嵌套上下文，还会触发组合式膨胀（1个占位符→5+条规则） - PurgeCSS看到的是两个不同选择器，不敢删任何一个，静态分析彻底失效
- 正确做法是改用
@mixin封装样式逻辑，各组件显式@include，输出仍是单类名结构
为什么PurgeCSS没删掉没用的button--loading
PurgeCSS不理解BEM语义，它只做字符串匹配。类名没在源码中“完整出现”，它就当不存在。
立即学习“前端免费学习笔记（深入）”；
- 动态拼接类名，如
class="button__icon--${status}"，默认扫描不到button__icon--loading - 第三方组件没显式声明class，比如
<van-button></van-button>→ 必须写成<van-button class="van-button"></van-button> -
content路径漏了模板文件，例如Vue项目没覆盖src/pages/**/*.{vue,tsx} - 动画类如
toast--animate-in被删，大概率是配置里漏了keyframes: true
怎么让BEM真正压低CSS体积
关键不是“怎么写BEM”，而是“怎么让工具链信任BEM”。BEM只是给构建工具喂的结构化饲料，喂对了，PurgeCSS才敢删、cssnano才好压、浏览器才匹配快。
- block边界必须清晰：一个组件只负责一个职责，
search-bar__input不能出现在header结构里 - 禁止一义多职类名，如
button--primary-margin-left-20——PurgeCSS无法推断使用场景，只能保守保留 - 所有修饰符必须和block类同时出现，
button--disabled单独写等于告诉构建工具：“这个类可能根本没人用” - 用PostCSS插件（如
postcss-bem-linter）校验命名规范，避免手误写成button_elem或button--mod--another
最常被忽略的一点：BEM的价值不在“写得少”，而在“删得准”。一旦修饰符失控或工具链没对齐，体积问题就从构建阶段拖到线上，再难补救。
