必须重构 user-profile__avatar--size-lg--theme-dark 类名，因其语义失控：avatar 不应承载页面级主题或跨场景尺寸，modifier 应离散互斥且由 css 变量驱动，ui 片段需能脱离 dom 独立复用。
别缩写类名，也别堆砌修饰符——冗余不是名字太长，而是组件职责没划清、状态没收口。
为什么 user-profile__avatar--size-lg--theme-dark 这类命名必须重构
这不是字符数问题，是语义失控信号：一个 avatar 元素不该承载页面级主题（--theme-dark）或跨场景尺寸（--size-lg）。这类 Modifier 实际上是外部配置，硬塞进类名会导致：
- 每次新增主题都要加新类，CSS 文件线性膨胀
-
purgecss无法识别动态拼接的类名，误删风险高 - DevTools 里搜
avatar找不到user-profile__avatar--size-lg--theme-dark，调试断链 - 复制粘贴 HTML 时，
--theme-dark在新页面里毫无意义
用 CSS 自定义属性替代重复的 Modifier 类名
当 Modifier 只控制颜色、间距、圆角等可变量时，类名应回归语义，把值交给 CSS 变量驱动：
:root {
--color-primary: #007bff;
--button-padding: 12px 24px;
}
.user-profile__avatar {
background-color: var(--color-primary);
padding: var(--button-padding);
}
关键点：
- 变量定义在
:root或 Block 根元素（如.user-profile），不写死在每个 Modifier 类里 - JS 动态注入变量更可控：
el.style.setProperty('--avatar-size', 'large') - 避免在
:root下塞业务变量，比如--user-avatar-border-radius应该放在.user-profile块内
把“看起来像 Element”的结构提级为独立 Block
出现 card__body__list__item 或 nav__submenu__link 时，不是命名太长，是划分错了。判断标准就一个：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
这个 UI 片段，下次出现在另一个页面时，我愿不愿意直接复制粘贴这段 HTML 和 class？如果犹豫了，它大概率不该是 Element，而该是一个 Block。
-
list、status-badge、search-bar都应是独立 Block，各自有__item、__icon、__input - 卡片内列表样式差异，用
list--in-card而非card__body__list - 禁止写
.card__body .list这类后代选择器——BEM 规则只允许单类名匹配
Modifier 必须离散、互斥、可枚举
一个 Block 的 Modifier 总数建议 ≤5 个，常见为：--primary、--disabled、--sm、--lg、--outline。以下写法全是反模式：
-
--very-big-and-centered（描述性短语，不可枚举） -
--is-loading--is-error--is-success（布尔态不互斥，应只保留一个） -
--theme-dark--size-xl--variant-outline（把三个配置维度全塞进类名）
真正该做的：把多维状态收口到父 Block，用 .block--is-loading 统一控制所有子元素，CSS 写 .block--is-loading .block__icon { opacity: 0.5; }。
最常被忽略的不是怎么起名，而是每次写新类名前有没有问一句：这个 UI 片段，脱离当前 DOM 结构后，还能不能独立存在、复用、调试？答案是否定的，那就先重构职责，再谈命名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
