BEM类名过长本身不直接导致HTML体积失控，真正拖慢首屏、卡住调试、破坏协作的是Modifier堆叠失控、组件边界模糊与状态逻辑错位；应限制Modifier≤5个、禁用形容词堆叠、用CSS自定义属性替代样式细节类名，并将共用状态提升至父Block。
BEM 类名过长本身不直接导致 HTML 体积失控，真正拖慢首屏、卡住调试、破坏协作的，是 Modifier 堆叠失控 + 组件边界模糊 + 状态逻辑错位。缩写类名（如 uc-avt--l）只会让问题更难定位，不是解法。
Modifier 堆叠为什么让 HTML 体积飙升
像 user-card__avatar--size-lg--theme-dark--is-loading 这种写法，在列表渲染 20 次时，光这个字符串就增加约 1.2KB（未 gzip）。它不是语义问题，而是把配置逻辑全塞进了 HTML。
- Modifier 必须离散、互斥、可枚举；禁止形容词堆叠（如
--very-big-and-centered） - 一个 Block 的 Modifier 总数建议 ≤ 5 个（
--primary、--disabled、--sm、--lg、--outline） -
--size-lg和--theme-dark若只控制间距、颜色等可变量，应交给 CSS 自定义属性，而非硬编码进class - 布尔型状态（如
--is-loading）可以保留，但必须和 Block 类名共存：user-card__avatar user-card__avatar--is-loading，不能单独出现
组件边界不清比类名长更致命
出现 profile-page__user-card__avatar，问题不在命名长度，而在把页面容器（profile-page）和功能组件（user-card）混为一谈。BEM 的 Block 应该是可复用、有独立状态的单元，不是 DOM 路径快照。
- 判断是否该拆 Block：这个子结构能否被抽到其他页面复用？是否有自己的 JS 行为（如
handleClick）或 CSS 状态（如is-expanded）？ -
status-badge不该是user-card__status，而应是独立 Block -
card__content是高危命名，优先拆成card__body、card__meta、card__actions - 多元素共用同一状态（如“加载中”），应提升到父级：
dashboard--is-loading，再用选择器批量控制：.dashboard--is-loading .dashboard__header
CSS 自定义属性怎么替代冗长 Modifier 类名
当 Modifier 实际只控制颜色、间距、圆角等可变量时，硬写类名等于重复劳动。CSS 自定义属性能把配置逻辑抽离到样式层，HTML 回归语义本质。
立即学习“前端免费学习笔记（深入）”；
- 例如原本要写
button--theme-primary--size-xl--variant-outline，现在只需button，然后在 CSS 中定义：
:root {
--btn-theme: #007bff;
--btn-padding: 12px 24px;
--btn-border-radius: 8px;
}
data- 属性 + element.style.setProperty()），不能靠人工维护多套 CSS 文件--button-hover-bg-color 这类泛滥变量@keyframes 中的支持较晚（v15.4+ 才完整），动画场景仍需保留必要类名CSS Modules 类名臃肿该配什么 generateScopedName
CSS Modules 默认生成的 _button__clickable___zXy9F_12 类名既难读又拖慢构建。这不是靠删空格能解决的，得从 generateScopedName 或 localIdentName 入手控制输出结构。
- 推荐格式：
[name]_[local]_[hash:base64:5]——[name]保模块上下文，[local]保语义，[hash:base64:5]足够防冲突且比默认:8缩短近 40% - 避免用
[path]或嵌套多层[folder]，路径越深类名越不可控，构建缓存失效越频繁 - JS 层必须配合
localsConvention: "camelCase"，否则styles.btnPrimary会找不到对应 key - 禁用字符串拼接类名：
className={`${styles.btn} ${styles['btn--primary']}`容易漏空格、错顺序，且无法被PurgeCSS安全识别
最常被忽略的一点：BEM 类名长度失控，往往发生在「页面级容器」和「功能型 Block」混为一谈的时候。拆开之后，HTML 更轻，CSS 更易维护，连 JS 绑定事件都更干净——这比任何缩写技巧都管用。
