inheritance/覆盖来自不同外部文件的现有CSS规则

我有一个现有的项目，曾经没有Bootstrap（3），但现在我必须改变它并保留旧的CSS。

我目前的CSS订单：

var bundleCSS = new StyleBundle("~/Views/bundle/newBundle").Include( "~/Views/Shared/normalize.css", "~/Scripts/jquery.ui/jquery-ui-latest.custom.css", "~/Scripts/jquery.jqGrid/ui.jqgrid.css", "~/Scripts/sweetalert/sweet-alert.css", "~/Content/bootstrap.css", "~/Views/Shared/OldButNeededLayout.css", "~/Content/custom.css"); //will be rendered in that order 

custom.css用于修复将bootstrap.css添加到项目中的所有错误。

这里的问题是， OldButNeededLayout.css有OldButNeededLayout.css 3000行的css-code，顺便提一下当前的项目非常大。

因此，当用旧css覆盖引导程序而不是通过添加引导程序来修复错误时，我得到的结果不可预测。（因为我不知道它会改变什么）

怎么做或如何解决将bootstrap css / js集成到（我的）现有项目中的问题？

Answer 1

这听起来像是一种混乱Bootstrap的混乱方式，同时试图避免对OldButNeededLayout文件进行任何更改……

根据我的经验，将Bootstrap集成到现有项目中是一项艰巨的任务，需要对HTML进行大量修改（添加类和修改标记结构）以及对现有CSS进行大量修改，以使其与Bootstrap一起使用。

您的方法将使维护变得困难，并且还会向客户端提供大量不必要的CSS代码。

我会建议：

1. 从项目中删除OldButNeededLayout css并清除custom的内容，以便绝大多数css来自Bootstrap。

2. 显然，这看起来不像你的网站应该如此

3. 在您的custom CSS中有条不紊地修复需要更改的每个布局或样式，直到您有一个类似于您的Bootstrap前站点的站点。 使用必需的OldButNeededLayout中的位，但要确保每个样式属性都是必需的。

当然，这是很多工作，但它将导致一个对客户来说更易于维护，可预测和简洁的项目。

我不认为你可以将Bootstrap放到一个大型项目上并且不希望对现有的HTML和CSS做出重大改变是合理的期望。

Answer 2

以下建议并不理想，肯定有更好的方法来实现您的需求，但我的建议符合您的要求……

在新的custom.css文件中，您可以在声明元素时尝试更具体。 因此，如果在OldButNeededLayout.css中你覆盖了Bootstrap的样式，例如：

 .divclass .jumbotron h1 { color: red; } 

您可以在custom.css文件中声明更高级别的特异性，以确保它将覆盖您在OldButNeededLayout.css中的内容：

 .parent .divclass .jumbotron h1 { color: blue; }