优先处理全局样式和基础组件，通过Sass变量与混合宏重构reset规则，按功能拆分SCSS文件实现软重构，对新增模块启用BEM命名，并用主题与状态模块集中管控样式变量。
从最影响开发效率和样式冲突最严重的地方开始，优先处理全局样式和基础组件。
先梳理全局样式和重置规则
老项目往往在 reset.css 或 base.css 里堆砌大量无作用域的标签选择器（如 div, p, ul）和通配符（*{margin:0; padding:0}），这是样式污染的源头。用 Sass 提取为变量+混合宏，比如：
- 把常用颜色、字体大小、间距定义成
$color-primary、$spacing-md等变量 - 将重复的清除浮动、行高重置、表单默认样式封装成
@mixin reset-block、@mixin form-reset - 逐步删掉原始 CSS 中裸写的重置代码，改用
@include reset-block
按功能拆分基础组件样式
识别高频复用但命名混乱的模块，例如按钮、卡片、弹窗、表单控件。不急于重写，而是用 Sass 的 @use + 文件拆分做“软重构”：
- 新建
_button.scss，只放.btn及其变体（.btn--primary、.btn--sm）的样式 - 在原 CSS 入口文件中用
@use "button"替代原有按钮样式块 - 保留旧类名兼容性，新需求统一走新 SCSS 文件，自然过渡
给老结构注入 BEM 命名约束
不强求全量改名，而是对新增或重度修改的模块启用 BEM。例如一个已有 .user-info 区块，重构时升级为：
立即学习“前端免费学习笔记（深入）”；
- 外层容器：
user-info - 头像：
user-info__avatar - 姓名：
user-info__name - 状态标签：
user-info__status user-info__status--active
配合 Sass 的嵌套语法，逻辑更内聚，也方便未来提取为独立组件。
用 Sass 模块化管理主题与状态
老项目常有硬编码的颜色/尺寸值散落在各处。借助 Sass 的模块能力集中管控：
- 建
_theme.scss定义主题色、暗色模式开关、断点等 - 建
_state.scss统一管理:hover、:disabled、.is-loading等状态样式 - 关键组件（如导航、表格）引入主题变量，支持一键换肤或响应式适配
改造不是推倒重来，而是让旧代码可读、可维护、可扩展——每一步都该让当下开发更顺一点。
