bem类名过长本质是组件设计问题，应通过拆分独立block、限制modifier类型、提升状态到父级、禁用深层嵌套和后代选择器来解决。
类名过长不是BEM规则本身的问题，而是组件边界模糊、状态外溢、结构误嵌套的信号——直接缩写或删字符只会让 .user-card__avatar--size-lg--theme-dark 变成 .uc-avt--l-d，调试时谁也看不懂。
什么时候该拆 Block 而不是缩写 Element
判断标准只有一条：这个 UI 片段下次出现在另一个页面时，你愿不愿意直接复制粘贴这段 HTML 和 class？如果犹豫，它大概率不该是子元素。
- 列表（
list）在卡片、弹窗、侧边栏都出现 → 必须提级为独立 Block，用list--in-card表达上下文，而不是card__body__list__item - 状态徽章（
status-badge）跨多个容器复用 → 它不是user-card__status，而是独立 Block，加 Modifier 如status-badge--pending - 表单字段（
form-field）在登录页、筛选栏、设置页共用 → 不该依附于某个父表单命名，而应自成 Block
Modifier 堆叠失控的真正解法
别写 button--theme-primary--size-xl--variant-outline。这种类名等于把配置全塞进 HTML，改一个值就得全局搜索替换。
- 用 CSS 自定义属性接管可变部分：
button类名保持干净，通过style="--btn-padding: 12px 24px; --btn-bg: #007bff"控制外观 - Modifier 只保留布尔型或枚举值：
button--disabled✅，button--on-dashboard-page❌ - 多个子元素共用同一状态时，提升到父 Block：
dashboard--is-loading，再用 CSS 选择器批量控制.dashboard--is-loading .button等
禁止三层下划线和非法嵌套
出现 .card__body__list__item 或 .header__nav__item__link，说明 BEM 结构已失控——Block 应是独立可复用单元，__ 只用于描述该 Block 内的直接子元素。
- 删掉所有中间层嵌套类名，把
list、nav、item提级为 Block - 绝对不要写
.card__body .list__item这类后代选择器；CSS 中只允许.list、.list__item、.list--in-card等单类名规则 - Modifier 名称禁用位置词：
--in-card可接受（已约定上下文），但--inside-header是坏味道，且必须能独立生效
最常被忽略的一点：每次写新类名前没问“它是否具备自身状态、行为或复用场景”，就直接往父 Block 里塞 __，结果类名越来越长，组件却越来越难抽离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
