类名过长本质是组件设计失当，非bem规范问题；应避免modifier堆叠，改用css自定义属性控制可变样式，拆分失控嵌套为独立block，厘清容器与功能组件的解耦关系。
为什么出现 user-card__avatar--size-lg--theme-dark 这种类名
这不是BEM写法“太啰嗦”，而是把本该由父级或外部控制的状态，错误地塞进了单个 Element 的 Modifier 里：
-
user-card__avatar本应只表达“这是用户卡片里的头像”，不承担尺寸、主题等跨上下文配置 -
--size-lg和--theme-dark实际是页面级或区块级状态，硬编码进类名会导致：每次新增尺寸/主题都要加新 CSS 规则、PurgeCSS 无法识别动态组合、DevTools 里搜avatar找不到带修饰符的实例 - 真正该复用的是
avatar这个视觉单元，而不是user-card__avatar--size-lg--theme-dark这个快照
Modifier 堆叠失控时，优先用 CSS 自定义属性替代类名
当 Modifier 只控制颜色、间距、圆角等可变量时，类名应回归语义，值交给 CSS 变量驱动：
- 保留干净的类名：
user-card__avatar，而不是user-card__avatar--size-lg--theme-dark - 在根节点或 Block 根上设置变量：
.user-card { --avatar-size: 48px; --avatar-theme: dark; } - CSS 中使用：
.user-card__avatar { width: var(--avatar-size); filter: var(--avatar-theme) = 'dark' ? brightness(0.8) : none; }（注意：条件逻辑建议用 JS 注入 class 或 style） - JS 动态注入更可控：
el.style.setProperty('--avatar-size', '64px')，避免维护多套 CSS 类
三层下划线或深层嵌套（如 card__body__list__item）说明结构已失控
出现这种写法，不是“命名太长需要缩写”，而是 Block 边界被严重误判：
-
card__body__list__item违反 BEM 原则：Block 应是独立可复用单元，__只能描述该 Block 的直接子元素，中间层body和list都不该存在 - 正确做法：把
list提级为独立 Block，用list--in-card表达上下文；item是它的直接子元素，写成list__item - 判断标准很实在：这个 UI 片段下次出现在另一个页面时，你愿不愿意直接复制粘贴这段 HTML 和 class？如果犹豫，它大概率不该是子元素
最常被忽略的一点：页面容器和功能 Block 混为一谈
比如写 dashboard-page__user-card__header__title，问题不在字符数，而在把组合关系（dashboard-page 包含 user-card）错当成隶属关系（user-card 是 dashboard-page 的子元素）：
-
dashboard-page是布局容器，user-card是功能组件，二者应解耦；HTML 中应是<div class="dashboard-page"><div class="user-card">，而非 <code><div class="dashboard-page__user-card"> <li>一旦出现 <code>__跨越了两个有独立行为/状态/复用场景的模块，就说明职责没划清——这比类名长度更致命 - 拆开后，
user-card可被复用于用户列表页、弹窗、侧边栏，CSS 和 JS 都更易维护
类名是否过长，从来不是字符串计数问题。每次写新类名前没问“它是否具备自身状态、行为或复用场景”，就直接往父 Block 里塞
__，才是所有臃肿的起点。
