到目前为止,我在网页设计方面的经验一直是规模很小的网站和博客(页面样式没有多少差异).但是,我现在开始处理一些规模更大的网站,我想通过创建可扩展和可维护的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">