应砍掉user-card__avatar--size-lg--theme-dark--is-loading这类语义超载类名，因其混杂尺寸、主题、状态三类信息，导致体积膨胀、PurgeCSS失效；Modifier须满足离散互斥、总数≤5、布尔/枚举值三条件。
为什么user-card__avatar--size-lg--theme-dark--is-loading这种写法必须砍掉
它不是“太长”，而是语义超载：一个类名里混了尺寸、主题、状态三类信息，每个Modifier实际只控制一个CSS变量（比如--avatar-size），却硬塞进HTML。结果是渲染20个头像时，光这个类名就多出1KB+未压缩体积；更麻烦的是PurgeCSS无法安全识别这类动态拼接的组合类，上线后可能漏删大量无用CSS。
真正该保留的Modifier必须满足三个条件：
• 离散互斥（user-card--loading和user-card--error不能共存）
• 总数≤5个（如--loading、--error、--compact、--expanded、--featured）
• 布尔态或枚举值，禁用--very-big-and-centered这类描述性短语
多个子元素共用同一状态时，别各自加--modifier
写dashboard__header--loading + dashboard__chart--loading + dashboard__list--loading看似直观，实则重复、难维护、易漏改。状态外溢是类名膨胀最隐蔽的推手。
正确做法是把状态提升到父Block：
• HTML中只写class="dashboard dashboard--is-loading"
• CSS中用.dashboard--is-loading .dashboard__header批量控制
• JS监听也统一在dashboard元素上操作className，比分散管理5个子元素更可靠
• 配合:where()或scoped CSS防止样式污染其他模块
三层下划线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自定义属性替代--size-lg这类修饰符
当Modifier实际只控制颜色、间距、圆角等可变量时，硬写类名等于把配置逻辑重复塞进HTML。比如button--theme-primary--size-xl--variant-outline，完全可以用button加CSS变量收口。
实操方式：
• 在Block根元素上设变量：.button { --button-padding: 12px 24px; --button-bg: #007bff; }
• 用data-属性驱动：，JS动态设置style="--button-padding: 16px 32px"
• 避免在:root下塞业务变量；优先在Block层级定义，比如.card { --card-shadow: 0 2px 8px rgba(0,0,0,.1); }
• --is-loading这类布尔状态可以保留，但必须和Block类名共存：user-card__avatar user-card__avatar--is-loading，不能单独出现
最容易被忽略的是：类名长度问题，90%出现在「页面容器」和「功能组件」混为一谈时。敢把一个“看起来很像子元素”的东西单独拎出来当成Block维护，比缩写类名难得多，也重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
