滥用BEM导致HTML体积膨胀的主因是Modifier堆叠、Element越界和类名冗余：如user-card__avatar--size-lg--theme-dark--is-loading式命名、dashboard__user-card__header__title越界嵌套，以及将样式变量硬编码为类名。
滥用BEM不会让HTML“结构”臃肿，而是让class属性值变长、重复多、组合失控，最终抬高HTML体积——尤其在SSR或列表渲染场景下，这会直接拖慢TTFB和首屏解析。
Modifier堆叠导致类名爆炸
真正造成体积飙升的不是user-card__avatar，而是user-card__avatar--size-lg--theme-dark--is-loading这种写法。它把多个状态硬编码进一个字符串，每次渲染都完整输出。
- Modifier应互斥、可枚举，总数建议≤5个（如
--primary、--disabled、--sm） - 禁止形容词堆叠：
card__title--large--bold--highlighted是设计失控，不是BEM - 动态拼接（如
className={`${block}__${elem}--${mod1}--${mod2}`}）会让Gzip失效——字符串无重复模式，压缩率骤降
Element命名越界放大冗余
当__被用在不该出现的地方，就会催生超长、不可复用的类名。比如dashboard__user-card__header__title，这已违反BEM原则：Element不能跨Block嵌套。
- 判断标准：这个子结构有没有自己的状态、行为或复用场景？有，就该升为独立Block（如
status-badge） - 常见错误：
search-bar__input--in-header——位置信息不该由Modifier表达，应拆出header-search-bar新Block - Element名必须语义化：
button__icon✅，button__div❌
CSS自定义属性没接管样式细节
把颜色、间距、圆角等可变量写成类名（如button--bg-blue-500、button--padding-12），等于把配置逻辑塞进HTML，既增体积又难维护。
立即学习“前端免费学习笔记（深入）”；
- 这类修饰符应被CSS自定义属性替代：
button+style={{ '--btn-bg': '#007bff', '--btn-padding': '12px 24px' }} - 变量只定义在Block层级，Element和Modifier通过组合使用，不各自声明
--button-hover-bg-color等碎片变量 -
button--disabled必须和button同时存在，否则构建工具无法识别上下文，tree-shaking失效
最常被忽略的一点：类名长度问题，90% 出现在「页面容器」和「功能组件」混为一谈时——比如把整个Dashboard当作一个Block，然后疯狂往里塞dashboard__xxx，边界一模糊，所有命名就失去收敛基础。
