bem本身不增大css体积，反而能压低30%以上冗余选择器；真正导致体积增大的是modifier失控、嵌套残留和purgecss失效。
不会。BEM本身不增大CSS体积，反而能压低30%以上冗余选择器；真正让打包体积显著增大的，是Modifier失控、嵌套残留和PurgeCSS失效。
为什么单类名选择器反而减小CSS体积
BEM强制用card__content替代.card .content这类后代选择器，从源头避免重复规则生成。中后台项目里大量结构相似的卡片、列表项，传统写法会为每个DOM路径单独产出一套几乎相同的CSS声明；BEM让所有实例复用同一类名，CSS规则只写一次。
- 浏览器匹配更快：单类名走哈希表查找，嵌套选择器需逐层回溯父元素
- Spotify实测落地后CSS体积平均下降18%，主因就是消除了“看起来不同、实际样式雷同”的选择器
- 构建工具tree-shaking更有效：类名结构可预测，
card--disabled必须与card共存，否则会被识别为未使用而删除
Modifier滥用才是体积暴涨的头号推手
修饰符本身不增体积，但button--size-sm、button--color-blue、button--padding-12这类像素级类名，会导致碎片化规则堆积，实测额外增加12%～18%体积。
- 真正该用的Modifier只有语义明确的有限组合：
button--primary、input--error、card--disabled - 一个Block的Modifier总数建议≤5个，禁止
button--primary-margin-left-20这种一义多职类名 -
button--disabled必须和button同时出现在className中，否则PurgeCSS无法推断依赖关系，可能误删或不敢删
PurgeCSS能否精准删掉BEM类名，取决于三件事
PurgeCSS不认BEM逻辑，只认字符串是否在模板中完整出现。它需要BEM提供可预测的命名模式，才能安全删除未用类名。
- 动态拼接类名（如
class="card__item--${status}"）会让PurgeCSS漏掉运行时生成的类名 - 第三方组件没显式声明class（如直接用
<van-button></van-button>），必须补上class="van-button" - content配置必须覆盖所有JSX/Vue模板路径，比如漏掉
src/pages/**/*.{tsx,vue}就会导致大量类名残留
HTML体积变大不是BEM的错，而是Modifier堆叠失控
user-card__avatar--size-lg--theme-dark--is-loading这种写法，在20项列表中光这个类名就多出近1.2KB原始HTML（未gzip）。问题不在BEM，而在把状态表达混进类名。
- Modifier应离散、互斥、可枚举，禁用形容词堆叠（如
card__title--large--bold--highlighted） - 颜色、尺寸、圆角等可变量应抽离到CSS自定义属性，HTML里只留
user-card__avatar和user-card--loading - 多个子元素共用同一状态时，提升到父Block控制，比如
dashboard--is-loading再用选择器批量影响子元素
最易被忽略的是：组件边界不清比类名长更致命。强行缩写user-card__avatar--size-lg为uc-avt--l，调试时根本看不出它属于哪个模块；而真正该做的是判断这个头像是否有独立状态或复用场景——有，就升为独立Block；没有，才考虑收敛命名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
