大型网站的CSS最佳实践

到目前为止，我在网页设计方面的经验是非常小规模的网站和博客（在这些网站和博客中，页面样式没有太多的多样性）。然而，我现在开始着手处理一些规模大得多的网站，我想通过创建一个可伸缩且可维护的css文件/结构，从正确的角度出发

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

body#news section .top { rules }

---

在大型网站上应用CSS肯定有一种更易于维护的方法吗？

避免给每个页面添加带有唯一ID的

主体标记。为什么？因为如果一个页面需要独特的样式，它应该有自己的样式表

我通常会有一个
main.css
样式表，用于我网站的各个类似部分（比如管理部分的
administration.css
，假设管理部分的页面具有相似的外观和感觉），然后给某些独特的页面提供自己的样式表（比如
signup.css
）

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

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

a { color: red; }

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

a { color: blue; }

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

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

您应该发现，大多数页面都有类似的设计方面，如排版和基本格式，这意味着您不需要对body标记应用和id

您应该尝试使用描述页面结构（页眉、页脚、侧边栏等）的ID，必要时可以在每个页面上重用这些ID。只有在设置特定于新闻或项目等的区域样式时，才应该开始使用id=news

归根结底，没有对错的答案。只要试着维护可恢复的css样式，同时尽量不要用不必要的标记重载标记。
始终使用css类。这将允许您重用更多的代码。由于每页可以有多个重复的类，因此可以真正创建一些小代码

CSS从右向左解析。因此，在上面的示例中，它将按以下顺序找到选择器：

具有classname.top的元素
节标记中具有classname.top的元素
节标记中的classname.top元素也包含在#news元素中
……等等

从这个角度看，你真的应该尽量让你的选择器尽可能短。为.top创建基本样式，然后如果需要为#新闻部分编写自定义内容，可以使用#news.top

始终尝试使用尽可能短的规则

margin:0 5px;

结束

这是基本的，但你会惊讶于有多少人不这么做

同时了解您可以了解的内容：

ex: font:bold 12px Helvetica, Arial, sans-serif;

一件非常有用的事情是，如果你按字母顺序排列规则。特别是如果您使用的是CSS3-webkit-and-moz-properties。我在这个问题上遇到了很多阻力，但我与12位以上的开发人员合作，我看到

.myClass { color:#f00; /* more stuff */ color:#fff; }

如果它们是按字母顺序排列的，那么您将避免代码重复。
总结上述答案并给出一些附加注释：

您将所有内容放在一个CSS中，并使用唯一的主体ID进行页面特定的设置。这种方法可以加快站点速度，因为您正在保存HTTP请求（浏览器只缓存一个文件）
每个页面有一个CSS，外加一个全局CSS，用于处理全局设置、页眉、页脚和任何其他随处可见的元素。如果您有多个开发人员在工作，这会更友好，因为同一文件的更新会减少冲突的可能性。即使您使用像SVN这样的版本控制系统（对于一个大的站点，您应该这样做），拥有不同的文件总是更安全的
您可以通过将文件分离为多个文件，然后使用缩小器将所有文件合并并压缩为一个“已编译”的CSS来实现这两个方面的最佳效果。这更为复杂，您需要将其融入您的工作流程中，这使得前端调试更加困难。看
这里有一个非常翔实和详细的答案：

您还可以查看面向对象的css：

或者css系统：
这会不会让修复bug变得更加困难，因为你必须为每个页面维护两个样式表，而不仅仅是一个？如果有什么不同的话，它会让修复bug变得更容易——我的样式表不会那么长，也不会那么凌乱，因为文件在逻辑上是分开的。此外，所有最新浏览器的开发工具（IE7、IE8、Firefox、Chrome、Opera和Safari）都将向您显示特定规则来自哪个样式表。当我将获取的许多辅助样式表只有几行时，发出额外的HTTP请求感觉有点浪费。尽管如此，我认为速度上的小小损失对于保持一个可维护的站点来说是一个不错的折衷。@Moses，如果您对此感到担忧，有一些方法可以在资产发送给客户之前进行组合。见：
.myClass { color:#f00; /* more stuff */ color:#fff; }