大型网站的CSS最佳实践

Question

到目前为止，我在网页设计方面的经验是在非常小规模的网站和博客上(在页面样式上没有太多的多样性)。然而，我现在开始处理一些规模大得多的网站，我想从创建一个可伸缩和可维护的css文件/结构开始。

目前，我将样式应用于网页的方法是在正文中给每个网页一个不同的ID，然后当我设计一个页面时，我的css规则将如下所示：

body#news section .top { rules }

当然有一种更易维护的方法来将CSS应用于大型网站？

Answer 1

避免给每个页面一个具有唯一ID的body标记。为什么？因为如果一个页面需要设置唯一的样式，那么它应该有自己的样式表。

我经常会有一个main.css样式表，我的网站的不同相似部分的样式表(就像管理部分的administration.css，假设管理部分的页面具有类似的外观和感觉)，然后给特定的独特页面提供自己的样式表(如signup.css)。

然后我按照从最小到最具体的顺序包括样式表，因为如果遇到两个完全相同的规则，将使用最近包含的样式表中的规则。

例如，如果我的main.css有：

a { color: red; }

..。出于某些原因，我希望我的注册页面有蓝色链接：

a { color: blue; }

如果我的signup.css包含在main.css之后，第二条规则将覆盖第一条规则。

<link rel="stylesheet" href="/stylesheets/main.css">
<link rel="stylesheet" href="/stylesheets/signup.css">

Answer 2

这里有一个非常详细的答案：Managing CSS Explosion

您还可以查看面向对象的css：http://www.slideshare.net/stubbornella/object-oriented-css

或者css系统：http://www.slideshare.net/nataliedowne/css-systems-presentation

Answer 3

总结上述答案，并提出一些补充意见：

1. 您可以将所有内容放在一个CSS中，并使用唯一的正文in进行特定于页面的设置。这种方法加快了站点的速度，因为您正在保存HTTP请求(浏览器只缓存一个文件)
2. 每个页面都有一个CSS，外加一个全局CSS来管理全局设置、页眉、页脚和任何其他到处出现的元素。如果您有多个开发人员在工作，这会更友好-因为更新相同的文件，冲突的可能性更小。即使你使用像SVN这样的版本控制系统(对于一个大的站点，你应该)，拥有不同的文件总是更安全的。
3. 你可以通过分离成文件，然后使用一个小工具将它们合并并压缩成一个“编译”的CSS，从而两全其美。这是更复杂的，你需要适应你的工作流程，这使得前端调试变得更加困难。请参阅Any recommendations for a CSS minifier?.