适用于大型网站的CSS最佳实践

问题描述：

到目前为止，我在网页设计方面的经验一直是非常小规模的网站和博客（页面样式中没有太多的多样性）。但是，我现在开始处理一些规模更大的网站，我想通过创建可伸缩和可维护的css文件/结构来开始。适用于大型网站的CSS最佳实践

目前，我将样式应用于网页的方法是给每一个网页的不同ID在身上，然后当我设计一个网页我的CSS规则看起来就像这样：

body#news section .top { rules }

当然，在大型网站上应用CSS还有一个更可维护的方法吗？

答

避免给每个页面一个body标签具有唯一的ID。为什么？因为如果一个页面需要独特的风格，它应该有它自己的样式表。

我会经常有一个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">

惯于本作修正错误的是要难得多，因为你必须为每个页面维护两个样式表，而不仅仅是一个？ – Moses 2011-03-02 02:10:52

如果有的话，它会使修复bug变得更加简单 - 我的样式表不会太长和混乱，因为这些文件在逻辑上是分裂的。此外，所有最新的浏览器开发者工具（IE7，IE8，Firefox，Chrome，Opera和Safari）都会向您显示特定规则来自哪个样式表。 – ClosureCowboy 2011-03-02 02:13:24

当我要抓取的很多次要样式表只有几行时，这会让我觉得有点浪费，请求额外的HTTP请求。尽管如此，我认为在速度上的小损失对于保持可维护的网站来说是一个体面的权衡。 – Moses 2011-03-02 02:21:58

答

你会发现什么是大多数网页都会有类似的设计方面喜欢排版和基本格式，这意味着你不需要申请和id body标签。

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

在一天结束时，没有正确和错误的答案。尽量保持可重用的CSS样式，同时尽量不要使用不必要的标签来超载你的标记。

答

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

CSS从右向左分析。所以在上面的例子中，将在此为了找到你的选择：

元素与类名.TOP类名.TOP 元素是在部分标签与类名.TOP 元素是在一节的标签也包含在#news元素 ...等中。

用这种方式来看，你应该尽量保持你的选择器尽可能短。为.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; }

如果他们是按字母顺序排列，然后你会避免重复代码。

答

综上所述上述答案，并给予一定的补充意见：

你把一切都放在一个CSS，并使用独特的机身编号为特定页面的设置。这种方法可以加速您的网站，因为您正在保存HTTP请求（浏览器只缓存一个文件）
您每页都有一个CSS，加上一个全局CSS来处理全局设置，页眉，页脚和其他出现的元素到处。如果你有多个开发人员工作，这更友好 - 由于同一个文件的更新而导致冲突的可能性更小。即使你使用像SVN这样的版本控制系统（并且你需要一个大的网站），拥有不同的文件总是比较安全的。
您可以通过分离文件，然后使用缩小器将所有这些文件合并并压缩到一个“编译”CSS中，从而获得两全其美的效果。这更复杂，您需要将其纳入您的工作流程，并且使前端调试变得更加困难。见Any recommendations for a CSS minifier?。

答

有在这里一个非常丰富和详细的解答：Managing CSS Explosion

你也可以检查出面向对象的CSS：http://www.slideshare.net/stubbornella/object-oriented-css

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

适用于大型网站的CSS最佳实践

相关推荐