书写干净轻巧易于维护管理的CSS代码

一、保持条理性
重置和重写
链接和字体
主布局
二级布局结构
表单元素
其他杂项

/* resets and overrides------------------*/
*{margin:0;padding:0;}
img{border:none;}

/* links & type--------------------------*/
body{font-family:lucida Sans",verdana,sans-serif;font-size:100%;}

a:link,a:active,a:visited{text-decoration:none;}
a:hover{color:#999;text-decoration:underline;}

h1{}
h1 a{}
h1 a:hover{}

h2{}
h2 a{}
h2 a:hover{}

/* layout -------------------------------*/
#page{}
#header{}
#col-alpha{}
#col-beta{}
#footer{}

/* callout boxes ------------------------*/
#callout-alpha{}
#callout-beta{}

/* form elements ------------------------*/
label{}
input{}
input.button{}

/* misc ---------------------------------*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}

二、标题、日期和签名
让其他人知道谁写了你的CSS,什么时候写的，以及如果有问题可以联系谁。在设计模板或主题时这非常的有用。

/*========================================
Subtle Shark
Copyright 2009 WDD
written for -www.WebDesignerDepot.com

swatch colors
-------------
13437a - dark blue
1d74be - mid blue
e1e1e1 - light gray
a3a3a4 - mid gray
8a8a8a - gray
=========================================*/

三、使用模板库(公共CSS文件)

四、良好的命名习惯
你会注意到上面声明了两个列的id，管他们叫col-alpha和col-beta，为什么不叫col-left和col-right？请总是考虑到将来的编辑。

下一年你可能需要重新设计你的站点，把左边的列移到右边，你不你不该就为了调整位置而在HTML中重命名这个元素并在样式表中重命名id。

　　当然，你可以就把左边的列移动到右边并且保留#col-left的id，但是那多让人困惑？如果id是“左”，人们应该会希望它将一直在左边。之后这没为你留下太多空间去移动周围的东西。

　　CSS的一个主要优点就是分离样式和内容的能力。你可以完全不用碰HTML，只修改CSS，就能重设计站点，所以不要用限制性的名字弄脏了CSS。用更通用的命名习惯，并保持一致。

　　让具体的位置或者样式的词语原理你的样式和id，一个.link-blue同样会让你话费更的工作，或者在客户要求你把那些蓝色的链接修改成橙色的时候让你的样式变得真的很糟糕。

　　按照他们是什么，而不是他们看起来的样子为元素命名。例如，.comment-blue和.comment-beta比起来就不太通用了，.post-largefont比.post-title更局限一些。

五、用连字符取代下划线
比较老的浏览器可能对CSS中的下划线支持不太好，或者完全不支持。为了更好的向后兼容，请养成使用连字符的习惯。用#col-alpha而不是#col_alpha。

六、 用组合元素重用样式
用组合元素代替重新声明样式来尽可能的重用样式。如果你的h1和h2都用同样的字体大小、颜色和边距，用逗号组合他们。
如下：
h1,h2{
margin:1em 0 2em 0;
font-size:1em;
color:#222;
}