安全替换选择器需守住优先级锚点和作用域边界：先全局搜索依赖类（含复合选择器），JS层新旧类共存过渡，CSS中用@apply或all: unset继承原样式；禁止单独重命名框架工具类、伪类锚点及动态拼接前缀类。
不是选择器“重构”本身错了，而是改写时没守住优先级锚点和作用域边界——旧页面样式错位，八成是新规则无意中覆盖了全局重置、框架默认值或 JS 动态注入的类名。
为什么改个类名就崩掉整页布局？
常见现象：把 .btn 改成 .c-button 后，按钮变小、文字偏移、间距消失。这不是浏览器不认新名，而是以下三点被同时打破：
- 原
.btn可能被 Bootstrap 或 reset.css 作为锚点参与了层叠计算（比如button.btn { margin: 0.375rem; }），新名失去这个上下文 - JS 里写了
el.classList.add('btn')或$('button.btn')，类名一换，逻辑直接失效 - 某些 CSS 规则靠组合选择器生效，比如
.modal .btn和.sidebar .btn，单独改.btn类名后，这些组合规则全部失活
如何安全替换选择器而不触发连锁错位？
核心原则：不删旧、不跳过中间层、不假设 JS 是静态的。实操分三步走：
- 先用
grep -r "\.btn" src/ --include="*.css" --include="*.scss"找出所有依赖该类的选择器，包括复合选择器和属性选择器（如[class*="btn"]） - 在 JS 层加临时兜底：
el.classList.add('btn', 'c-button')，让新旧类名共存过渡期至少两周 - 对 CSS 文件做渐进替换：先加
.c-button { @apply .btn; }（Tailwind）或.c-button { all: unset; /* 复制原 btn 所有声明 */ }，再逐步解耦
哪些选择器绝对不能直接重命名？
这些名字已深度耦合到运行时行为或第三方库逻辑里，硬改等于重写整个渲染链：
立即学习“前端免费学习笔记（深入）”；
- 框架工具类：
.container（Bootstrap）、.v-btn（Vuetify）、.ant-btn（Ant Design）——它们的样式由 JS 组件自动注入，改名后组件内部 class 匹配失败 - 伪类锚点：
:checked + .toggle-label这类依赖相邻关系的选择器，一旦改名，视觉反馈链断裂 - 动态拼接类名：
el.classList.add(`status-${status}`)中的status-前缀，若只改 CSS 里的.status-active，而漏掉 JS 拼接逻辑，对应状态样式永远不出现
真正要重构的不是“类名字符串”，而是类名与 DOM、JS、框架三者的契约关系。漏掉任意一环，错位就是必然结果，不是概率问题。
