CSS文件和不需要的覆盖 [英] CSS Files and Unwanted Overriding

问题描述

我有一个简单的HTML页面，它引用了3个CSS文件。第一个是仅用于页面的样式表。其他两个是为两个独特的模式的风格。这些模式CSS文件不是由我创建的，他们很高兴地分开使用 在整个网站的其他网页。

I have a simple HTML page that is referencing 3 CSS files. The first is a style sheet that is just for the page. The other two are for the styles of two unique modals. These modal CSS files were not created by me and they are happily being used separately on other pages throughout the site.

我的问题是这两个模态CSS文件包含几个常见的选择器，所以他们搞乱了对方的风格。

My problem is that both of these modal CSS files contain a few common selectors and so they are messing up each other's styles.

我理解，解决这个问题的最好方法是采取一个或两个文件，并使其选择器是唯一的。一种方法是命名空间的选择器。

I understand that the best way to fix this problem is to take one or both of the files and make their selectors unique. One way would be to namespace the selectors.

我的问题是，但是，现在我在这个页面，膝盖深，有反正是为了防止这些CSS冲突而不改变它们目前的模态CSS页面？是否有任何工具可以帮助您，例如 LESS ？

My questions is, however, now that I'm knee-deep in this page, is there anyway to prevent these CSS conflicts without changing the modal CSS pages as they currently stand? Are there any tools that can help such as LESS? What is the best practice for preventing this in the future?

推荐答案

最好的解决方案是重构这些css文件

The best solution indeed would be to refactor those css-files to your need.

然而，一个更简单的解决方案是在两个第三方css文件之后包含你的样式表，并重新声明公共选择器的样式

However, an easier solution would be to include your stylesheet after those two third-party css-files and re-declare the styles for the common selectors, which automatically overrides the previous settings.

LESS / SASS是帮助您更快，更舒适地编写CSS的优秀工具。我使用SASS的私人工作，真的推荐它。

LESS/SASS are excellent tools to help you write CSS faster and more comfortable. I use SASS for private work and really recommend it. They can't help you though with issues like you have atm.

编辑：

使用！important 是可能的，但被认为是不好的习惯，因为它旨在给予用户用他自己的覆盖作者风格的可能性。而不是使用！important 你应该做的是：

Using !important is possible, but considered bad habit, as it was intended to give the user the possibility to override author-styles with his own. Instead of using !important what you should do is:

1. 避免重复的样式


2. 如果您无法避免这种情况，请尝试通过以下任一方式解决此问题：
   
   
   
   • cascading正确顺序覆盖先前的样式）
   
   
   • 使用选择器特性（ W3C-Spec ）。
   
   

1. Avoid duplicate styles as much as you can.
2. if you can't avoid this, try to resolve this by either:
   • cascading (=using the proper sequence to override previous styles)
   • using selector specificity (W3C-Spec).

这篇关于CSS文件和不需要的覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！