核心解法是用带唯一前缀的容器class（如new-dashboard）作为样式作用域，所有新css必须嵌套其下，配合绝对路径资源和轻量reset，彻底隔离新旧样式。
怎么让新CSS不污染旧项目全局样式
直接往旧项目里加新CSS，大概率会炸——按钮变色、间距错乱、字体突然变小，全是“谁动了我的 :global”。核心解法不是删旧样式，而是用 class 当“结界”：新建一个带明确前缀的容器 class（比如 new-ui），所有新样式只在它内部生效。
实操建议：
- 选一个语义清晰、不易重名的 class 名，避免用
ui、style这类泛化词，推荐new-dashboard或feature-x-v2 - 新样式表开头统一加作用域限定：
.new-dashboard { }，所有选择器必须嵌套其下（.new-dashboard .btn，不能单独写.btn） - 旧页面中只需给新模块外层 DOM 加上这个 class，例如：
<div class="new-dashboard"><mynewcomponent></mynewcomponent></div>
- 别依赖 CSS-in-JS 的自动 scope（如 Vue 的
scoped或 Svelte 的:global()），旧项目往往没配构建链路，纯 CSS 文件更可控
如何处理新旧样式同名但行为不同的情况
比如旧项目里 .btn 是圆角+阴影，新设计要直角+无边框——不能直接覆盖，否则老按钮全崩。必须切断继承路径，靠作用域 class 强制隔离。
常见错误现象：新样式写了 .new-dashboard .btn，但旧 HTML 没加 new-dashboard class，结果新规则根本没生效；或者忘了重置继承属性，导致新按钮还带着旧项目的 font-family 或 line-height。
实操建议：
- 在
.new-dashboard根选择器里做一次轻量 reset：.new-dashboard { font-family: system-ui, sans-serif; line-height: 1.5; } - 所有新组件 class 都带前缀，如
.new-dashboard .new-btn，哪怕旧项目也有.btn，也不冲突 - 如果必须复用旧 class 名（比如对接遗留模板），就用属性选择器提高优先级：
.new-dashboard [class~="btn"]，但慎用——可读性差，调试困难
要不要用 CSS Modules 或 :is() 伪类来简化
CSS Modules 看起来很美，但旧项目没 Webpack/Vite 配置时，import styles from './Button.module.css' 直接报错；:is() 能缩写选择器，但 IE 和旧版 Safari 不支持，线上出 bug 很难定位。
性能与兼容性影响：
- CSS Modules 生成哈希 class 名，对 SSR 或服务端渲染的旧项目，需额外处理 class 名透出逻辑，成本远超收益
-
:is(.new-dashboard .btn, .new-dashboard .link)写起来省事，但一旦某个子选择器语法错误（比如多写了个括号），整个规则失效，且无法降级——旧浏览器直接忽略整条规则 - 最稳方案仍是手写嵌套：用
.new-dashboard .btn+.new-dashboard .btn--primary，编辑器能跳转、审查元素能定位、打包工具零门槛
图片/字体等资源路径怎么保持独立
新样式常带新图标或定制字体，如果路径写成 url(../icons/new-icon.svg)，而旧项目目录结构深浅不一，很容易 404。路径不是样式问题，是部署时的真实报错源头。
实操建议：
- 所有新资源走绝对路径，从 public 目录起始，比如
url(/assets/icons/new-check.svg)，和源码位置解耦 - 字体文件用
@font-face单独声明，并限定作用域：@font-face { font-family: 'NewIcon'; src: url(/assets/fonts/new-icon.woff2); } .new-dashboard { font-family: 'NewIcon', sans-serif; } - 别用相对路径拼接变量（如
url(${iconPath}/check.svg)），旧构建工具大概率不支持，编译就挂
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
