单站点能否同时使用两套不同CSS，解决Bootstrap 2旧站重构样式冲突？

完全可以通过样式隔离的方式实现两套CSS独立生效、互不影响，不需要依赖iframe，下面是两种可直接落地的方案：

方案1：自定义编译带命名空间的新版Bootstrap CSS #

• 下载你需要使用的新版Bootstrap的SCSS源文件
• 在SCSS入口文件外层套一个自定义类选择器作为专属命名空间，比如new-bs，示例代码：

.new-bs {
  @import "bootstrap";
}

• 编译该SCSS文件得到单独的新版Bootstrap CSS文件，此时所有新版样式只会作用在带有new-bs类的元素及其子元素上
• 实际使用时，新增的Navbar、顶部栏等组件外层统一套一个<div class="new-bs">容器即可，原有页面的旧样式不会受到任何影响

注意：如果新组件需要适配hover、focus等伪类样式，编译时确保命名空间正确作用到所有选择器即可，无需额外修改其他规则

方案2：使用CSS @layer 规则隔离（适配现代浏览器） #

• 给两套CSS分别指定不同的层级，后定义的层级优先级天然更高，示例代码：

/* 先定义层级顺序，后定义的new-bs优先级高于old-bs */
@layer old-bs, new-bs;

/* 旧Bootstrap2样式导入到old-bs层 */
@layer old-bs {
  @import url("old-bootstrap2.css");
}

/* 新组件样式/新版Bootstrap样式导入到new-bs层，所有选择器统一加专属前缀 */
@layer new-bs {
  .new-component .navbar {
    /* 导航栏自定义样式 */
  }
  .new-component .top-bar {
    /* 顶部栏自定义样式 */
  }
}

• 所有新增组件外层统一套上new-component类即可，新样式既不会被旧样式覆盖，也不会污染原有页面元素的样式

额外注意事项 #

• 如果新增组件有JS交互逻辑（比如导航栏折叠、下拉），要确保新版Bootstrap的JS只作用在新组件范围内，避免和旧站的Bootstrap2 JS产生冲突，可以手动指定JS的触发元素选择器，仅绑定到带自定义前缀的新元素上即可
• 不要直接导入未做隔离处理的新版Bootstrap CSS到页面，会直接全局覆盖旧样式，必须加前缀或者命名空间后再引入

内容的提问来源于stack exchange，提问作者Flori00