重构应隔离旧代码于\_legacy.scss，新增/修改走变量、mixin和语义化命名路径；优先抽象“隐形重复”行为，绑定语义的变量命名替代色值编码，慎用@extend而多用@mixin封装可配置样式。
别试图一次性重写整个样式表——90%的失败重构都死在这一步。真正可行的路径是：用 _legacy.scss 隔离旧代码，只在新增/修改处引入变量、@mixin 和语义化命名，让 DRY 原则随着每次提交自然渗透。
先建 _legacy.scss，而不是删老文件
直接覆盖或删除原有 CSS 文件会立刻触发回归 bug，尤其当老样式被 JS 动态加 class 或第三方组件依赖时。真实项目里更稳妥的做法是：
- 新建
_legacy.scss，把原styles.css内容完整复制进去（保留注释和结构） - 在主入口 SCSS 文件中
@import "_legacy"，确保视觉不崩 - 明确约定：
_legacy.scss是只读区，禁止新增任何样式，也不允许@import它到新组件文件中 - 所有新功能、新组件、修复类改动，全部走新路径：
_variables.scss+_mixins.scss+ 组件级Button.scss
识别“隐形重复”，比改颜色值更重要
很多人一上来就扫 #333、1px solid #ddd，但真正拖慢迭代的是语义重复。比如这些写法其实表达同一意图：
.header { display: flex; justify-content: center; align-items: center; }
.modal-footer { display: flex; justify-content: center; align-items: center; }
.card-actions { display: flex; justify-content: center; align-items: center; }
这不是“颜色写错了”，而是“居中行为没抽象”。此时该做的是：
立即学习“前端免费学习笔记（深入）”；
- 立刻在
_mixins.scss中定义@mixin flex-center { display: flex; justify-content: center; align-items: center; } - 在对应选择器中替换为
@include flex-center; - 哪怕当前只改了一个地方，也同步更新其他两处——这是建立团队直觉的关键动作
- 下次写新组件时，只要心里冒出“这我好像刚写过”，就先查
_mixins.scss
变量命名必须回答“它代表什么”，而不是“它叫什么”
把 $blue-500: #2563eb 当成变量是危险的。设计系统演进时，主色可能变紫、变灰、甚至支持深色模式，硬编码色值会让搜索替换变成雷区。
正确做法是绑定语义：
-
$color-primary: #2563eb;→ 表示品牌主色，用于按钮、链接、高亮边框等 -
$color-primary-hover: #1d4ed8;→ 主色悬停态，和$color-primary保持计算关系（如darken($color-primary, 8%)） -
$color-text-primary: #111;→ 文本主体色，和背景无关，只表达层级意图 - 避免
$spacing-md这类模糊命名；优先用$space-inline-sm或$space-section-top，让调用者一眼理解上下文
@extend 在遗留项目里基本等于埋雷
看到 .btn-primary {@extend .btn;} 就该警惕。在旧项目中，.btn 很可能已被多处修改、叠加了 hack、甚至混着 inline style 使用。@extend 会把整个 .btn 规则块复制进 .btn-primary，导致：
- CSS 文件体积不可控增长（尤其当
.btn含媒体查询或伪类时） - 调试时无法定位某条声明究竟来自哪一层继承
- 后续想拆分
.btn职责（比如把 padding 和 color 拆开）会引发连锁崩溃
替代方案更可控：
- 用
@mixin button-base($padding: 12px 24px, $font-weight: 500)封装真正需要的属性 - 在
.btn-primary中@include button-base;，需要覆盖时直接传参 - 仅对极简、零变化的工具类（如
.sr-only）保留@extend，且确认它永远不会扩展职责
重构不是为了显得“更高级”，而是让下一次改按钮圆角时，你只需要改一处、测一遍、合一个 PR —— 其余所有地方自动生效。这个目标是否达成，不取决于你用了多少 @mixin，而取决于你改完后，有没有人敢在周五下班前提交那个按钮样式修复。
