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

Posted 2023-05-09

【中文标题】继承/覆盖来自不同外部文件的现有 CSS 规则

【英文标题】：inheritance/overwriting existing CSS rules from different external files

【发布时间】：2016-02-29 11:39:54

【问题描述】：

我有一个现有项目，以前没有 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 大约有 3000 行 css 代码，顺便说一下，当前项目相当大。

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

如何解决将引导 css/js 集成到（我的）现有项目中的问题？

【参考方案1】：

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

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

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

我建议：

从您的项目中删除 OldButNeededLayout css 并清除 custom 的内容，因此绝大多数 css 来自 引导程序。

显然，这与您的网站完全不同，所以

有条不紊地修复每一位需要更改的布局或样式， 在你的 custom css 中，直到你有一个类似于你的网站 预引导站点。使用来自OldButNeededLayout 的位 必要，但要确保每个样式属性都是必要的。

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

我不认为这是一个合理的期望，即您可以将 Bootstrap 扔到一个大型项目中而不期望对您现有的 HTML 和 CSS 进行重大更改。

【参考方案2】：

以下建议并不理想，当然还有更好的方法来实现您的需求，但我的建议始终符合您的要求...

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

.divclass .jumbotron h1 
   color: red;

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

.parent .divclass .jumbotron h1 
   color: blue;