类名过长源于组件边界不清，应按状态/行为/复用性拆分block而非缩写；modifier用CSS自定义属性替代堆叠；mix需语义合理且保障样式隔离；页面容器与功能block须分离。
类名过长不是命名规则的问题，是组件边界没划清——缩写类名治标不治本，强行截断反而让 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，后期改一个值要全局搜索替换。
- 用 CSS 自定义属性接管可变部分：
button类名保持干净，通过style="--btn-theme: #007bff; --btn-padding: 12px 24px"控制外观 - 状态类名只保留布尔型：
button--disabled✅，button--on-dashboard-page❌ - 多个子元素共用同一状态时，提升到父 block：
dashboard--is-loading，再用 CSS 选择器批量控制.dashboard--is-loading .dashboard__header
嵌套深但又不想拆块？试试 mix
BEM 官方支持 mix（混合），允许一个节点挂多个 block 类名，这是合法且语义清晰的替代方案。
立即学习“前端免费学习笔记（深入）”；
- 卡片里的按钮既是操作入口，又是通用按钮 → 写成
card__action button button--primary，而不是card__action-button--primary - mix 不是偷懒捷径：如果这个按钮在卡内必须用不同圆角、边距、禁用样式，那它本质已是
card__button，此时不应混用 - mix 后仍需保证样式作用域隔离，推荐配合
:where()或 scoped CSS 避免意外污染
最常被忽略的一点：BEM 类名长度失控，往往发生在「页面级容器」和「功能型 block」混为一谈的时候。比如把整个 dashboard-page 当成一个 block，然后往里塞 dashboard-page__user-card__header__title —— 其实 user-card 和 dashboard-page 是组合关系，不是隶属关系。拆开之后，HTML 更轻，CSS 更易维护，连 JS 绑定事件都更干净。
