如何正确订购外部 CSS 样式表？答案

【问题标题】：how external CSS stylesheets should be order properly?如何正确订购外部 CSS 样式表？
【发布时间】：2014-01-22 06:43:47
【问题描述】：

我在项目中放入的样式表，按升序排列如下：

Eric Meyer 的“reset.css”
'bootstrap.css'
'bootstrap-theme.css'
'jQueryMobile.css'
我的自定义“style.css”
'media.css'（响应式布局的媒体查询）。

是否有任何规则或更合适的方式来排序它们，以便以后不会出现冲突？请帮忙！

【问题讨论】：

标签： css semantic-markup web-standards

【解决方案1】：

由于已经提出了“级联”样式表顺序应用事物的观点，我不会对此进行过多扩展。请记住，如果在其下方的另一个样式表中找到相同的属性，则样式可以被相同的属性覆盖（也就是说，第二个样式表可能会覆盖第一个样式表中的某些内容，但反之则不然）。但是，这也适用于同一样式表中的属性。如果p{font-size:1em;} 在第一行，p{font-size:2em;} 在第二行，则 font-size 将为 2em。

一旦您选择了订单，我还建议您考虑将您的 CSS 放入尽可能少的文件中。每个外部样式表（或页面上的任何外部）都是另一个服务器请求，这会导致页面加载速度变慢。如果每个页面都使用了所有样式，请将它们合并到一个大的 CSS 文件中，仍然遵循样式表的顺序。

【讨论】：

【解决方案2】：

由于在创建新定义时会覆盖 CSS 定义，我建议将所有来自外部源（如 jQuery、bootstrap 等）的 css 文件放在最前面（在顶部）。

通过这种方式，您可以轻松地覆盖自定义 CSS 文件中的 css 标签。

否则，您将让外部文件覆盖您在自定义 CSS 文件中创建的所有内容，这绝对是不行的！

希望这会有所帮助！

【讨论】：

【解决方案3】：

这取决于您希望 css 执行的顺序。

您首先放置的将首先加载并执行.... 所以当你把reset放在第一位时，所有的标签都会被重置为它们的默认行为

如果您想首先加载自定义样式，请将其放在所有其他 css 之上（甚至在重置之上）...但请记住，最后一个样式可用于任何常见的标记，如果您在标记中没有明确调用 tag 的任何类，则将被实现！！

例如。

如果你有：

<ul>
  <li> blah 1</li>
  <li> blah 2</li>
  <li> blah 3</li>
  <li> blah 4</li>
  <li> blah 5</li>
</ul>

然后假设在您的 自定义 css 中，您已经设置了

ul{padding:10px}

然后你调用它，重置，然后这个填充将被应用，但如果你在reset.css之前调用你的css，那么<ul>将被重置为默认值！！ :)

这本来是我的订单：

Eric Meyer 的“reset.css”（首先重置所有内容）
我的自定义“style.css”（检测浏览器尺寸并调用相关的css）
media.css（（响应式布局的媒体查询）。）
bootstrap.css (执行所有其他 css)
jQueryMobile.css ( * 加载后支持 bootstrap.css * )
bootstrap-theme.css（主题总是最后出现）

【讨论】：