旧项目用@layer、@container和css变量重构最有效：@layer按reset/base/components/utilities分层，容器查询仅用于复用组件的尺寸响应，css变量只提取语义明确的值，@scope需谨慎兼容旧版safari。
直接用 @layer、@container 和 CSS 自定义属性替代预处理器和全局覆盖式写法，是 2026 年重构老旧 CSS 最有效路径。浏览器已全面支持，无需构建步骤，改完即生效。
旧项目里 @layer 怎么分层才不翻车
别一上来就套五层架构。先看现有 CSS 文件里哪些规则最常被覆盖或加 !important——这些就是该塞进 components 或 utilities 层的信号。
- 把所有重置类（如
* { margin: 0 }）统一挪到@layer reset，并确保它出现在所有其他@layer声明之前 -
@layer base只放真正影响全局渲染的设置：字体继承、box-sizing、滚动条样式、prefers-reduced-motion响应 - 旧项目中那些“写了又删、删了又写”的布局类（如
.flex-row、.grid-3col），直接归入@layer utilities，避免和组件样式混在一起 - 禁止在
@layer components里写.btn:hover这类状态样式——它们属于@layer utilities，否则响应式切换时容易漏掉
容器查询（@container）替代媒体查询的实操边界
不是所有响应式逻辑都适合改容器查询。只在组件尺寸会随父容器动态变化、且该组件被多处复用时才值得动。
- 典型适用场景：
.card在侧边栏窄区显示简略信息，在主内容区展开详情；.chart-wrapper根据容器宽度自动切换柱状图/折线图 - 必须提前给父容器加
container-type: inline-size，否则@container规则完全不触发——旧项目里常见漏掉这步，查不到原因 - 别用
@container (min-width: 400px)替代@media (min-width: 400px)做整页布局，容器查询不处理视口级断点 - 旧项目若用了 JS 动态插入 DOM，需手动触发
container重计算：调用element.requestContainerUpdate()，否则新挂载的容器不响应
CSS 自定义属性怎么接住旧项目的硬编码值
别全局搜 #3b82f6 替换为 var(--primary)。先识别出哪些值是真“主题色”，哪些只是临时调试留下的魔数。
- 颜色：只对语义明确的值提取变量，比如
--primary-500、--error、--success；按钮边框色、图标描边色这类非语义值，保留原样更安全 - 间距：用
var(--space-4)替代1rem没问题，但别把margin-top: 13px强行映射成var(--space-13)——这种值大概率是设计稿误差，直接归入@layer utilities的原子类更可控 - 字体大小：优先用
clamp()替代固定px或rem，例如font-size: clamp(1rem, 2.5vw, 1.25rem)，旧项目里大量存在的font-size: 16px就不该硬套变量 - 动画时长/缓动：提取为
--ease-out、--duration-short等，但避免把transition: all .3s这种宽泛写法拆成多个变量——它本身已是反模式
为什么旧项目引入 @scope 要格外小心
@scope 是隔离样式的利器，但 2026 年底 Safari 18.4 才刚稳定支持，Chrome/Firefox 虽已支持，旧项目若还兼容 Safari 17.x 或更早版本，@scope 会被完全忽略，导致样式泄漏。
- 仅在明确知道目标用户浏览器版本的前提下使用，比如内部管理后台、企业内网系统
- 不要用
@scope替代 BEM 类名做 JS 选择器定位——document.querySelector('.card__title')仍需真实 class 名，@scope不改变 DOM 结构 - 若必须降级，可用
:where(.legacy-scope) .btn包一层作兼容层，但注意:where()会清空选择器权重，可能破坏原有覆盖逻辑 - 最稳妥做法：先用
@layer划分作用域，再在关键模块试点@scope，而非全量替换
真正卡住重构进度的，往往不是语法不会用，而是没意识到：旧项目里那些“看起来能跑”的样式，很多依赖隐式层叠顺序或浏览器默认行为。改用现代特性时，得先确认它是否还在那个上下文里起作用——比如移除 normalize.css 后，<button></button> 的默认 padding 是否还一致，display: contents 在表格单元格里是否仍被支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
