bem类名体积问题根源在于modifier失控、状态冗余和语义未收敛；应限制modifier≤5个且互斥可枚举，禁用堆叠写法，用css自定义属性接管样式细节，html回归语义，避免js动态拼接类名。
移动端H5页面里，BEM类名本身不膨胀体积，真正让HTML变重的是修饰符失控、状态冗余拼接和未收敛的语义表达——比如 user-card__avatar--size-lg--theme-dark--loading 这种写法，在列表渲染20次时，光这个 class 属性就多出近1.2KB原始HTML（未gzip）。
Modifier必须限制数量且禁止堆叠
一个Block的Modifier总数建议≤5个，且互斥、可枚举。堆叠式写法如 button--primary--large--outline--disabled 不是BEM，是命名失控。
- ✅ 正确用法：
button--primary、button--disabled、button--lg—— 各自独立，CSS中用组合生效 - ❌ 错误现象：
button--primary-lg、card__title--bold--highlighted--large—— PurgeCSS无法识别、HMR热更新失效、SSR首屏TTFB抬高 - Modifier只表达业务状态（
--error、--active）或有限尺寸（--sm、--lg），不表达样式细节（--bg-blue-500、--ml-4）
用CSS自定义属性接管像素级控制
颜色、圆角、间距、字体大小等可变量，不该靠Modifier类名硬编码，而应抽到CSS层统一管理。HTML回归语义，CSS负责表现。
- 把
button--theme-dark--size-xl--variant-outline缩减为button，然后在CSS中定义：:root { --button-bg: #fff; --button-radius: 8px; --button-padding: 12px 24px; } .button--dark { --button-bg: #1a1a1a; } - 避免在JS中动态拼接类名：
className={`${block}__${el}--${mod}`}容易漏空格、错分隔符，且PurgeCSS无法静态分析 - 推荐封装：
clsx(BLOCK, mod && `${BLOCK}--${mod}`)，配合常量const BLOCK = 'tab-bar'防止运行时注入不可控字符串
移动端必须砍掉无意义嵌套与跨层组合
低性能安卓机上，.card .card__header .card__title 这种三层链式选择器会拖慢重排；iOS Safari伪类失效也常因选择器耦合过深引发。
- 子元素必须平级：
.tab-bar__item和.tab-bar__icon同级，不写.tab-bar__item__icon - 禁止跨层组合：
.tab-bar--dark .tab-bar__item是反模式；主题态应挂根元素，用CSS自定义属性向下透传 - 媒体查询写在组件内部：
@media (min-width: 768px) { .tab-bar__item { flex: 1 } }，而非提一层到全局断点，避免编译后生成大量未使用规则
最易被忽略的一点：BEM类名体积问题从来不在“要不要用”，而在“怎么收口”——Modifier是否收敛、自定义属性是否真落地、HTML里有没有手写拼接。一旦放任JS层动态注入类名字符串，PurgeCSS就彻底失效，所有“精简”都成空谈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
