老项目样式串联的根本原因是全局css未设边界，须用命名空间前缀或@scope人为划出作用域，确保第三方/业务样式仅作用于指定容器，禁用无差别重置，隔离第三方库样式，并主动清理隐性全局样式。
老项目样式串联（即一个页面改了，其他页面莫名错位）根本不是“改得不够小心”，而是全局 CSS 没设边界——必须人为划出作用域，否则改一处、动全身是必然结果。
用命名空间前缀硬隔离，不依赖构建工具
适用于纯 HTML + CDN 场景，或无法接入 Webpack/Vite 的遗留系统。核心是让所有第三方/业务样式只生效于某个容器内。
- 选一个稳定、语义清晰的 ID 作为根，比如
#legacy-app或#order-module，确保它在 DOM 中唯一且不被 JS 动态删改 - 把整套 CSS 文件内容复制进一个
<style></style>块，用该 ID 包裹全部规则（注意：不是嵌套写法，是手动加前缀） - 所有选择器都要前置，例如
.btn→#legacy-app .btn，input[type="text"]→#legacy-app input[type="text"] - 避免使用
* {}、html {}、body {}这类无差别重置，它们会逃逸出容器，直接污染全局
用 @scope 做渐进式隔离（Chrome 125+ / Safari 17.4+）
原生支持的作用域语法，无需构建，但需确认目标浏览器版本。它比手动加前缀更安全，因为浏览器会自动阻止跨边界匹配。
- 写法示例：
@scope (#payment-form) { .submit-btn { background: #007bff; } } - 它等价于手动写
#payment-form .submit-btn，但多了两层保障：一是选择器不会意外匹配到#payment-form外的同名元素；二是支持:scope和&直接引用根节点 - 注意：
@scope不支持嵌套作用域（如@scope (.a) { @scope (.b) { ... } }），也不能用于@keyframes或媒体查询内部 - 旧版浏览器会直接忽略该规则，所以必须搭配降级方案（比如上面的命名空间前缀）
第三方库样式必须绑定容器，不能靠 !important 补漏
Bootstrap、Element UI 等库的样式默认面向全局，直接引入就会穿透。强行用 !important 不仅无效，还会让后续维护者完全无法预测样式流向。
- 优先查文档：Bootstrap 5+ 支持
container选项（如日历组件的container: '#calendar-wrapper'），确保 JS 渲染的 DOM 落在你划定的容器内 - 若库不支持容器挂载，就用
iframe隔离——虽然略重，但它是唯一 100% 可靠的全局样式阻断方式，尤其适合嵌入式报表、支付弹窗等独立功能块 - 禁用库自带的 reset.css / normalize.css，改用项目统一基础样式，否则
h1 { margin: 0 }这类规则会在整个页面生效
真正难的不是加前缀或写 @scope，而是识别哪些样式“本不该存在”——比如一个只有登录页用的 .error-tip 却定义在全局 common.css 里。这类隐性串联点，必须靠 grep -r "\.error-tip" src/ 这类手段主动挖出来，而不是等它崩在生产环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
