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

本文关键字：文件 规则 CSS 外部 覆盖 继承 | 更新日期: 2023-09-27 18:24:26

我得到了一个现有的项目，它过去没有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覆盖bootstrap并通过添加bootstrap来修复错误时，我会得到不可预测的结果。（因为我不知道它会在哪里改变什么）

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

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

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

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

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

我建议：

  1. 从项目中删除OldButNeededLayout css并清除custom的内容，使得绝大多数css来自独自创立

  2. 显然，这看起来一点也不像你的网站应该，所以

  3. 有方法地固定每一个需要改变的布局或样式，在你的custom css中，直到你有一个类似于你的预引导站点。使用OldButNeededLayout中的位必要，但要确保每个样式属性都是必要的。

当然，这是一项艰巨的工作，但它将为客户带来一个更具可维护性、可预测性和简洁性的项目。

我认为这不是一个合理的期望，你可以把Bootstrap放到一个大项目上，而不期望对现有的HTML和CSS进行重大更改。

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

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

.divclass .jumbotron h1 {
   color: red;
}

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

.parent .divclass .jumbotron h1 {
   color: blue;
}
相关文章：