大型网站的CSS最佳实践

时间:2011-03-02 01:56:36

标签: css

到目前为止,我在网页设计方面的经验一直是非常小规模的网站和博客(页面样式没有多少差异)。但是,我现在开始处理一些规模更大的网站,我想通过创建可扩展和可维护的css文件/结构来开始。

目前,我将样式应用于网页的方法是为每个网页提供一个不同的ID,然后当我设计一个页面时,我的css规则将如下所示:

body#news section .top { rules }

当然,对于大型网站应用CSS有一种更可维护的方法吗?

5 个答案:

答案 0 :(得分:6)

避免为每个网页分配一个带有唯一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">

答案 1 :(得分:4)

这里有一个非常翔实和详细的答案:Managing CSS Explosion

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

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

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

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

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

答案 4 :(得分:0)

始终使用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; }

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