bem本身不冗余，冗余源于modifier滥用、层级错判及用类名替代css变量；应限制modifier≤5个、禁用堆叠式类名、改用css自定义属性控制样式值。
不会——BEM 本身不制造冗余，真正导致冗余的是 Modifier 滥用、元素层级错判、以及把 CSS 变量该管的事硬塞进类名里。
为什么 user-profile__avatar--size-lg--theme-dark 这种写法必须砍掉
这不是字符数问题，是语义越界：一个 avatar 元素不该知道“页面主题”或“跨组件尺寸”。这类类名实际在承担配置职责，却藏在 HTML 里，结果就是：
- 每次加个新主题，就得新增一整套类，CSS 文件线性膨胀
-
purgecss看不到动态拼接的类名（如className={`${block}--${theme}`}），只能保守保留所有规则 - DevTools 里搜
avatar找不到带--theme-dark的实例，调试断链 - 复制这段 HTML 到新页面，
--theme-dark立刻失效——它没绑定任何变量或上下文
Modifier 数量失控是体积暴涨的主因
BEM 的 --modifier 类名本身很轻，但滥用会让 CSS 规则爆炸。比如为按钮写 button--padding-8、button--padding-12、button--bg-blue-400……最后 CSS 里全是碎片声明，毫无复用。
- 一个 Block 的 Modifier 总数建议 ≤ 5 个：如
button--primary、button--disabled、button--sm、button--outline、button--loading - 禁止出现
button--margin-left-20这类“一义多职”类名——PurgeCSS 无法推断使用场景，tree-shaking 失效 -
button--disabled必须和button同时存在，不能单独用；否则构建工具无法识别上下文
用 CSS 自定义属性替代像素/颜色类名
当 Modifier 实际只控制颜色、间距、圆角等可变值时，硬写类名等于把配置逻辑重复塞进 HTML。应让类名回归语义，把值交给变量驱动：
.user-profile__avatar {
width: var(--avatar-size, 40px);
background-color: var(--avatar-bg, #007bff);
border-radius: var(--avatar-radius, 50%);
}
- 变量定义在
:root或 Block 根选择器下（如.user-profile），不要每个 Modifier 类里都重写一遍 - JS 动态注入更可控：
el.style.setProperty('--avatar-size', '64px') - 避免在
:root下塞业务变量（如--user-avatar-border-radius），应下沉到块级作用域
HTML 类名膨胀的真正瓶颈不在 BEM，而在状态表达方式
首屏慢不是因为用了 card__title，而是写了 card__title--large--bold--highlighted--is-editable 这种堆叠式类名。它在 SSR 场景下直接抬高 TTFB 和 HTML 解析耗时。
- Modifier 必须离散、互斥、可枚举；禁止形容词堆叠（
--large--bold--highlighted） - 避免手动拼接：
className={`${block}__${elem} ${block}--${mod}`}容易漏空格、错顺序，且无法被 PurgeCSS 安全识别 - 用
clsx替代字符串拼接，但别在useMemo里反复调用却不缓存——静态分析会失效
最常被忽略的一点：BEM 的「块」不是越小越好，也不是越像嵌套路径越好；它是语义边界的显性声明。一旦你开始怀疑某个类名“是不是太长了”，真正该问的其实是：“这个东西到底属于谁？它的状态能不能收口？”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
