如何平衡CSS BEM命名缩写与逻辑清晰度，有效缩短命名长度？

本文共计741个文字，预计阅读时间需要3分钟。

类名过长不是命名规则的问题，是组件边界没划清——简化类名，不拘泥于标准，强行截断反而让代码更难以理解——例如将`user-card__avatar--size-lg`变成`uc-avt--l`，调试时可能找不到其位置。

什么时候该拆 block 而不是缩写 element

判断标准就一条：这个子结构有没有自己的状态、行为或复用场景。有，就升为 block；没有，才考虑精简命名。

• status-badge 出现在用户列表、订单卡片、通知弹窗里 → 必须独立 block，不该叫 user-card__status
• price-tag 有自己的颜色逻辑、动画、点击反馈 → 不该依附于 product-card 命名
• form-field 在登录页、筛选栏、设置表单都用 → 它不是 search-form__input 的子元素，而是协作关系

Modifier 堆叠失控的真正解法

别写 button--theme-primary--size-xl--variant-outline，这种类名等于把配置全塞进 HTML，后期改一个值要全局搜索替换。