重构css的核心是控制选择器特异性，使其可预测、可收敛、可批量替换；应避免高权重id和!important，改用语义类、bem、:is()降权及:where()隔离第三方样式。
高优先级选择器（比如 #header .nav ul li a:hover）不是写得越“准”越好，而是越难改、越易冲突、越拖慢渲染。重构目标不是消灭ID或类，而是让选择器的特异性（specificity）可预测、可收敛、可批量替换。
为什么 !important 和 ID 选择器是重构第一阻力
它们不是“错”，但会快速污染整个样式系统：
-
!important一旦出现，就只能用更高权重或另一个!important覆盖，形成恶性循环；它绕过层叠逻辑，让开发者工具里的“已删除样式”失去参考价值 - ID 选择器单个权重就是
0,1,0,0，比任何类组合都高；更麻烦的是，它天然绑定 DOM 结构——#user-profile-card改成#profile-summary，所有相关 CSS 都得手动搜改，没法靠 BEM 或原子类复用 - 常见错误现象：
.btn-primary在某个页面不生效，查开发者工具发现被#modal .btn覆盖了，而 modal 是第三方组件，你不能改它的 ID
把后代选择器 div .content p 拆成扁平类名
浏览器从右往左匹配，p 是关键选择器，但它太泛——全页所有 <p></p> 都要检查父级是否含 .content、再查祖先是否为 div。性能只是表象，真正卡维护的是语义断裂：
- 删掉
div标签？整个规则失效 - 想把同样样式用到
<section></section>？得新增一条规则，或改选择器为div, section .content p，权重又涨了 - 推荐做法：直接给
<p></p>加语义类，如<p class="article-paragraph"></p>，对应 CSS 写.article-paragraph - 如果必须保留结构关系（比如只在卡片内生效），用 BEM 的修饰符：
.card__body .card__text→ 改为.card__text，并在 HTML 中确保它只出现在.card__body内部——结构约束交给模板，不靠 CSS 强制
用 :is() 替代长链选择器降权而不失功能
想统一设置几种按钮的 hover 效果，别写 .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover —— 这三条加起来权重还是 0,0,1,1，但维护成本翻三倍。用 :is() 可以合并且不增加权重：
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover {
opacity: 0.8;
}
等价于：
:is(.btn-primary, .btn-secondary, .btn-danger):hover {
opacity: 0.8;
}
注意：:is() 的权重取括号内最高值（这里是 0,0,1,1），不会变成 0,0,3,1。它还能嵌套，比如 :is(header nav, .sidebar) a，比写两套规则干净得多。
重构后最难盯住的点：第三方组件的样式穿透
你自己写的 .modal-header 权重是 0,0,1,0，但第三方库（如 Ant Design）可能用 .ant-modal .ant-modal-header（0,0,2,0）覆盖你。这时候别硬加 !important，试试：
- 用
:where()降权：:where(.my-modal) .modal-header权重是0,0,1,0，哪怕它实际匹配成功 - 在构建时用 CSS Modules 或 scoped style（Vue/Svelte），让类名自动加哈希，彻底隔离
- 最实在的：查文档，看该组件是否暴露
className或wrapClassNameprop，把你的低权重类名塞进去
重构不是一次清理完就结束，而是建立“新增样式不提权”的习惯——每次写新规则前，先问：这个类名能不能复用？有没有更小的权重能达成同样效果？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
