根本原因是将性能优化与结构解耦混为一谈：扁平类名虽提升性能，却因缺乏命名约束、上下文丢失、样式污染导致可维护性下降。
CSS选择器性能优化后页面更难维护，根本原因不是“优化错了”，而是把「性能优化」和「结构解耦」混为一谈——用扁平类名（如 .btn-primary）替代深层嵌套（如 .modal .header .title）本应提升可维护性，但实际中常因缺乏命名约束、上下文丢失、样式污染三类问题反向拖累开发体验。
类名泛滥导致语义断裂
盲目替换后代选择器后，大量孤立类名散落在 HTML 中，失去组件边界感。比如把 .card .title 拆成 .card-title 是合理的，但若同时存在 .post-title、.list-title、.sidebar-title，且无统一前缀或作用域约束，就会出现：
- 同名不同义：
.title在卡片里是 18px 加粗，在文章页却是 24px 行高 1.2，靠注释或记忆区分 - 改一个
.title样式，需手动排查所有使用该类的模板，不敢批量搜索替换 - 新成员接手时无法从类名推断它属于哪个模块，VS Code 的 CSS Peek 常跳转到错误定义位置
HTML 结构变更后样式失效却无报错
扁平类名看似解耦，实则把样式绑定从“DOM 路径”转移到“类名约定”。一旦 HTML 结构调整，比如把 <h2 class="card-title"></h2> 改成 <div class="card-title">
<h2>，视觉不变但语义已偏移——此时若未同步更新 JS 逻辑（如通过 <code>.card-title 获取标题文本），运行时不会报错，但功能悄然异常。
这类问题在以下场景高频发生：
- 服务端渲染（SSR）与客户端 hydration 不一致时，类名存在但 DOM 层级错位
- 第三方组件库注入的 DOM 节点未遵循你的类名规范，导致样式漏匹配
- 使用
innerHTML动态插入内容，忘记补全类名，新元素无样式
缺少作用域机制放大冲突风险
纯 CSS 没有天然的作用域，.btn 类一旦全局定义，就可能被任意层级的子组件意外覆盖。性能优化后往往更倾向“多写类、少嵌套”，结果反而加剧了：
- 优先级失控：两个
.btn规则权重相同，谁在 CSS 文件里靠后谁生效，调试时得翻完整文件找顺序 - !important 使用频率被动上升，尤其当第三方 UI 库（如 Ant Design）和自定义样式共存时
- 构建工具无法静态分析类名是否被真正引用，
unused-css工具容易误删“看起来没用但实际 JS 动态添加”的类
真正健壮的优化，不是单纯压平选择器层级，而是在类名设计阶段就引入作用域意识——比如用 BEM 的 .card__title 明确归属，或借助 CSS Modules / scoped style 自动生成哈希后缀。否则，你省下的那几毫秒样式计算时间，会以三倍的人力成本在调试和回归测试中还回去。
