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

Answer 3

总结上述答案并提供一些额外的评论：

您将所有内容放在一个CSS中，并使用唯一的正文ID进行特定于页面的设置。这种方法可以加速您的网站，因为您正在保存HTTP请求（浏览器缓存只有一个文件）
每页有一个CSS，加上一个全局的CSS来处理全局设置，页眉，页脚和任何其他到处出现的元素。如果您有多个开发人员工作，这会更友好 - 由于对同一文件的更新而导致冲突的可能性更小。即使您使用像SVN这样的版本控制系统（并且您应该使用大型网站），也可以使用不同的文件更安全。
您可以通过分成文件，然后使用缩小器将所有这些合并并压缩为一个“已编译”的CSS来充分利用这两个世界。这更复杂，您需要将其融入您的工作流程中，这会使前端调试变得更加困难。见Any recommendations for a CSS minifier?。

Answer 4

你应该发现大多数页面都有类似的设计方面，如排版和基本格式，这意味着你不需要对身体标签申请和识别。

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

在一天结束时，没有正确和错误的答案。只是尝试保持可恢复的CSS样式，同时尽量不要使用不必要的标记重载标记。

Answer 5

始终使用CSS类。这将允许您重用更多代码。由于每页可以有多个重复的类，因此您可以真正创建一些小代码。

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

带有classname .top的元素 section标记中包含classname .top的元素包含在#news元素中的section标记中的classname .top的元素 ...等

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

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

margin:0 5px;

在

margin:0 5px 0 5px;

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

还要了解你可以做什么：

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

一件非常有用的事情是，如果你按字母顺序排列规则。特别是如果您使用CSS3 -webkit-和-moz-属性。我得到了很多回击，但我与12个以上的开发人员合作，我见过

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

如果它们是按字母顺序排列的，那么您将避免代码重复。