真正有效的解法是重构职责而非缩写或哈希；必须砍掉Modifier堆叠（如--size-lg--theme-dark--is-loading），因其超载语义、仅控单变量、HTML冗余且PurgeCSS难识别；Modifier总数≤5且互斥可枚举，禁用样式细节类名，状态应提升至父Block；非法嵌套如card__body__list__item实为组件划分错误，应升格list为独立Block并用Modifier（如list--in-card）控制上下文样式；CSS自定义属性适用于颜色/间距等可变量，通过data-属性驱动，避免root下定义业务变量；新类名需经“能否直接复用”检验，犹豫则应建为独立Block。
类名过长不是BEM本身的问题，而是组件边界模糊、状态表达错位、Modifier滥用的综合结果；真正有效的解法是重构职责，而不是缩写或哈希。
为什么user-card__avatar--size-lg--theme-dark--is-loading这种写法必须砍掉
它暴露三个硬伤：Modifier 堆叠超过语义承载能力（尺寸、主题、状态混在一起）、每个 Modifier 实际只控制一个 CSS 变量（如 --avatar-size、--avatar-bg）、HTML 里重复出现时体积飙升且无法被 PurgeCSS 安全识别。
- 一个 Block 的 Modifier 总数建议 ≤ 5 个，且必须互斥可枚举（如
--primary、--disabled、--sm、--lg、--outline） - 禁止用 Modifier 表达样式细节：
--bg-blue-500是坏味道，应由 CSS 自定义属性接管 -
--is-loading这类状态建议提升到父 Block（如user-card--is-loading），再用 CSS 批量控制子元素，避免每个__avatar、__name都加一遍
怎样把 card__body__list__item 这类非法嵌套转成合法且简短的结构
这不是命名优化问题，是组件划分错误。浏览器不报错，但 card__body__list__item 已失去复用能力和语义控制力——它根本不是 card 的 element，而是 list 的 element。
- 删掉所有中间层
__body__list类名，把list升格为独立 Block： - 若需卡片内特殊样式（如缩进更小），加 Modifier：
list--in-card，而非靠父级路径推导 - 绝对不用
.card__body .list__item这类后代选择器；CSS 中只允许单类名规则：.list、.list__item、.list--in-card
哪些地方该用 CSS 自定义属性替代类名
当 Modifier 实际只控制颜色、间距、圆角、阴影等可变量时，硬写类名等于把配置逻辑重复塞进 HTML。CSS 自定义属性能把这部分抽离到样式层，让类名回归语义本质。
- 在 Block 根元素上设变量：
.card { --card-shadow: 0 2px 8px rgba(0,0,0,.1); } - 用
data-属性驱动变量：，配合 JS 动态设置style="--button-size: lg" - 避免在
:root下定义业务相关变量；Safari 对 CSS 变量在@keyframes中支持较晚，动画场景仍需保留关键类名
最常被忽略的一点：每次写新类名前，得问一句——这个 UI 片段，下次出现在另一个页面时，我愿不愿意直接复制粘贴这段 HTML 和 class？如果犹豫了，大概率它不该是 __element，而该是一个独立 block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
