Question

如果问题很愚蠢，我很抱歉，但这是我的第一个项目。

我从HTML / CSS-coder获得了html.css布局，并且对于每个视图，他们制作了单独的html和单独的CSS文件。

但我正在开发SPA，所以会有一个页面作为切入点。显然，它应该包含所有视图的所有CSS文件。问题是某些CSS文件包含具有相同名称但内容不同的类。因此，如果我只是在条目html中放入CSS文件列表，一些视图就变得一团糟，因为它们使用了错误的类。

非常感谢。

当我看到我的问题没有被理解时，我决定举例：

File1.css，在view1中使用：

.class1 {
cursor: default;
}

File2.css，在view2中使用：

.class1 {
cursor: pointer;
}

显然，我需要原样并且不能使用!important;，因为这会使浏览器在view1和view2中只使用其中一个。

解决这个问题的正确方法是什么？请求html编码器重新命名课程，还是自己动手？或者是否有一些工具可以自动合并CSS文件？

另外，为了避免这种情况，通常应该如何为SPA编码html / css布局？

更新1 我很感谢SO社区为帮助我做出的努力，尽管问题确实看起来很模糊。我已经从所有答案中学到了很多东西。我现在的情况要清楚得多。

Answer 1

像你这样的许多项目中的问题是开发人员不按标准方式做他们应该做的事情。在500多行CSS代码中管理CSS文件的正确方法是遵循模块化结构化模式，如BEM。这些标准指导您正确选择命名约定和编写Css组件。例如，在Twitter Bootstrap中，他们使用组件和实用程序来管理大型项目并避免此类冲突。

你摆脱它的方式

您总是有机会在html代码中内联编写样式。这将带来很高的特异性，并将覆盖所包含文件的基于Clas的CSS。
您可以提供自己的.css文件，并将其包含在所有developre的css和!important所有混乱之后或在id s等高度特异性的帮助下制作您的CSS赢了！
忘记整个CSS他们为您提供并开始使用Twitter Bootstrap或Zurb Foundation等框架。

Answer 2

是的，您将不得不手动进入并重新编写类。此外，您可以将id或额外的类添加到当前样式的任何部分。

例如： <div class="CSS-coder" id="myExtraStyles"> 或 <div class="CSS-coder myExtraStyles">

！important 将覆盖大多数样式。但是编辑当前不会共享样式属性的类会更好。

另外请记住，“级联”意味着从上到下。因此，在默认样式之后加载的任何样式都将覆盖之前加载的样式。

我同意另一张海报，因为“框架”是要走的路。

祝你的项目好运。

Answer 3

修改

重新阅读你的问题我想我现在对你的实际问题有了更好的了解。

您可以做的是找到或添加可用于过滤样式的父元素。

我们假设您链接到这两个CSS文件，并且它们都定义了这样的样式：

/* First CSS file */
.sub-div {
    background-color: red;
}

/* Second CSS file */
.sub-div {
    background-color: blue;
}

在HTML上，查找可以使用的父元素。

<div class='red-only'>
    <div class="sub-div"><p>View 1</p></div>
</div>

<div class='blue-only'>
    <div class="sub-div"><p>View 2</p></div>
</div>

创建自定义CSS（最后应链接到该文件）。

.blue-only .sub-div {
    background-color: blue;
}

.red-only .sub-div {
    background-color: red;
}

Answer 4

如果我理解正确，似乎你需要使用父/子选择器，具体取决于它是哪个视图：

<强> file1.css：

.view1 .class1 {
  // Styles
}

<强> file2.css：

.view2 .class1 {
  // Styles
}

要实现这一目标，请查看每个视图，看看是否有可以附加课程的顶级元素，例如<body>标记：

<body class="view1">
    <div class="class1">

和

<body class="view2">
    <div class="class1">

这消除了对!important的任何需求（尽可能远离它！）

Answer 5

使用css时，顺序很重要。

最后声明的文件将具有最高优先级。如果您有

，请注意这一点

<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">

然后file2中指定的代码将覆盖file1中的代码，只有它们具有相同的特异性。这意味着即使在file1中声明了更具体的声明也将胜过。因此，如果要覆盖file1中的规则，则需要在file2中使用完全相同的声明。

当处理由其他人创建的文件（如bootstrap或类似文件）时，最好创建一个新文件。

<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
<link href="myStyle.css" rel="stylesheet" type="text/css">

这将帮助您避免因修改原件而可能出现的问题。

当你需要检查哪个类应用于某个元素时，chrome和firefox中的代码检查器会很有用。

可能是您的元素正在应用一个类，该类会覆盖您尝试应用于该元素的类。例如：

<div class="class1 class2 class3" ></div>

Class3可能会覆盖class1和class2的一部分，因为它是最后应用的类。就像我说的，CSS顺序非常重要。

如果可能，请勿使用！important。您可能希望稍后覆盖值，并且使用！important将很难这样做。验证file1中是否有！important声明，因为这些声明可能会导致您遇到麻烦。

Answer 6

您使用的是编程语言吗？或者只是CSS / HTML标记？如果您使用编程语言（我猜想，因为您有一个入口点），您只需创建一个大的switch语句，检查当前视图，然后相应地注入相应的css文件。

CSS覆盖了几个文件

6 个答案:

你摆脱它的方式

修改