先建\_legacy.scss隔离旧样式并设Git保护，再用@layer分层、@mixin聚合逻辑、同步更新HTML类名，确保重构可控。
直接在旧项目里开干 SCSS 重构，不隔离、不分层、不设边界，90% 会引发样式回归和 JS 绑定断裂——这不是技术问题，是工程节奏失控。
先建 _legacy.scss 隔离脏代码，禁止新写入
老项目 CSS 往往混着重置、全局工具类、页面级样式、第三方补丁，全塞在一个 main.css 里。第一步不是改名，是“划界”：
- 新建
_legacy.scss，把原有全部 CSS@import进来（路径如@import "legacy/main.css";） - 立刻在构建配置中移除对原
main.css的引用，只保留_legacy.scss作为唯一旧样式入口 - 同步加 Git 保护：在
_legacy.scss文件头写注释// ❌ 不允许新增规则，仅作迁移过渡，并配置 pre-commit 检查含/* ❌ */的文件禁止提交新样式
用 @layer 显式分层，解决新旧样式覆盖混乱
即使你写了 .button--primary，它也可能被 #header .nav a:hover 压住——问题不在 BEM 命名，而在层叠无序。必须用 CSS 级联层收编：
- 在 SCSS 入口顶部（所有
@import和@layer块之前）统一声明层序：@layer reset, base, components, utilities, overrides; - 把
_legacy.scss包进@layer legacy { ... }，确保它永远处于底层 - 新组件样式一律写进
@layer components { .product-card { ... } }，媒体查询也必须套进去：@layer components { @media (min-width: 768px) { .product-card { grid-template-columns: repeat(2, 1fr); } } } - 避免用
@import "bootstrap.css"直接引入——查文档确认是否支持分层；若不支持，强制包裹：@layer vendor { @import "bootstrap.css"; }
用 @mixin 聚合高频逻辑，别碰 @extend
重构不是为了多写嵌套，而是消灭重复 + 锁定变化点。老项目里反复出现的 padding/border/flex 组合、状态切换、响应式断点，全交给 @mixin：
立即学习“前端免费学习笔记（深入）”；
- 定义语义化断点 mixin：
@mixin mq($break: md) { @if $break == sm { @media (max-width: 480px) { @content; } } @else if $break == md { @media (min-width: 481px) and (max-width: 768px) { @content; } } } - 按钮基础样式用
@mixin button-base($bg: #007bff, $radius: 4px) { background: $bg; border-radius: $radius; transition: background 0.2s; }，而不是@extend .btn——后者会把.btn的所有上下文一并拖进来，污染新组件边界 - 禁止在
@mixin里写&__element多层嵌套；一个@mixin只负责一组有强耦合关系的声明，比如form-control-focus同时控制 outline、box-shadow、z-index - 调用时传单位：
@include button-base($bg: #28a745, $radius: 6px);，别在 mixin 体内硬拼px
HTML 类名同步更新时，三类地方最容易漏
CSS 改完，HTML 不动等于白干。但老项目里动态拼接、JS 注入、第三方容器这三处，手动搜 class= 根本扫不全：
- 查 JS 中所有
el.classList.add('btn')或innerHTML = '<div class="card">'，用grep -r "classList\.add\|innerHTML.*class" src/ --include="*.js"扫出清单，逐条补上 BEM 形式：btn→button--primary - 第三方组件（如
swiper、react-datepicker）的根容器不能直接加 BEM 类，必须外层包一层：<div class="carousel"><div class="swiper"></div></div>，再写.carousel__container - 模板引擎中带空格的 class：
class="btn <%= isActive ? 'active' : '' %>"→ 编译后可能变成class="btn active"或class="btn "，必须改成class="<%= ['btn', isActive ? 'btn--active' : ''].join(' ') %>"
最常被忽略的是：Block 名没归属感。写 card 而不是 product-card，三年后没人敢动它——因为不知道谁在用、改了会影响哪块业务。命名不是风格问题，是接口契约。
