一、写在前面的

都是自己积累形成的一些东西，可能带有明显的个人印记。不是专业内容，不是权威指南，只是展示一点自己的观点，借此希望能与各位优秀的同行交流看法，见解。以得到进步与提高。

关于如何处理网站的CSS，各个网站做法都不一样，这随着网站的性质及大小不同，公司前人留下的规范不同，以及CSS工程师的眼界不同而有所不同。由于我从业经历有限，所知甚浅，只能说些肤浅业余的内容，不准确之处欢迎指出。

就CSS文件而言，有的网站分为header.css, body.css, footer.css，不做评价；
有的分为reset.css, main.css, content.css，不做评价；
有的分为common.css,然后每个种类的页面一个CSS，例如home.css(主页), album.css(相册页面),message.css(站内信页面),blog.css(日志页面)等，不做评价；
有的分为base.css，然后每个活动页面一个单独的CSS，等，不做评价；
还有的直接将CSS嵌在页面中，而非外部链接调用，不做评价。

这些不同的处理方法，没有什么正确与错误之分，只有适合不适合。每种方法都有其存在的道理，所以我是没有资格做任何评价的。

就每个CSS文件的内容而言，一般都会有一段长长的CSS reset（样式重置），然后就是有着统一前缀，命名较长的样式内容，就像人人网的部分样式截图：

使用长命名，统一的父级命名避免样式冲突时无可厚非的。确实！曾经我也如此。

首先关于CSS文件，我一般只使用一个文件，这无关于网站的大小，网站越大，某种意义上我这种做法的优势与潜力就会体现的越明显。我这种单CSS文 件的做法适合于web2.0的网站，例如像是SNS网站（开心、人人、白社会），嘀咕网，虾米网，凡客这类网站，如果是门户网站，sorry，铁定不适 合。

让网站单CSS谁都会，关键是为何可以使用单CSS文件，这个CSS文件不会很大吗，如果一个网站有400个页面，那么这个CSS文件岂不要数百 K。非也，在网站页面风格一致，在web系统结构良好的情况下，CSS文件可以控制的非常小，而且高性能，同时页面扩展性也非常好。下面就开始一点一点的 展示，内容较多，需要慢慢来~~

1、整体概述

页面布局与文章内容显示需要，我将整体架构做成了一张图片，见下图：

2、关于CSS reset
CSS reset(css重置)基本上是不需要的，至少可以说80%的的CSS reset都是没有必要的，反而增加了页面CSS 的overwrite，尤其像开心网*{margin:0;}这样子业余的做法更是要不得（反而破坏了很多UI的兼容性，比如说单复选框等）。我不是一概 鄙弃CSS reset，有些常用标签我也是会简单重置一下的，而且会避免overwrite（样式重写），以保证样式最精简，渲染最高效。如下代码示例：

body{
line-height:1.4;
background:white;
}
body,input,textarea,select{
font-size:12px;
color:#333;
font-family:arial;
}
body,h1,h3,h4,p,ul,ol{
margin:0;
}
ul,ol{
padding-left:0;
list-style-type:none;
}
/*image with no-border*/
a img{border:0;}

这就是我全部的CSS reset。就这些就足够了，我是没有遇到什么兼容性的问题，不要盲从于一些主流的做法，就这些，足够了。

3、关于CSS通用样式库
我在“CSS样式分离之再分离”一文中曾提到过CSS通用样式库。所谓CSS通用样式库就是可以在任何网站使用的CSS样式库。“CSS样式分离之再分离”一文中仅仅展示了CSS同样样式库的一部分，完整的通用样式库如下（您可以根据自己的喜好重命名或是添加删除部分样式）：

.l{float:left;}.r{float:right;}.cl{clear:both;}
.n{font-weight:normal; font-style:normal;}.b{font-weight:bold;}.i{font-style:italic;}
.fa{font-family:Arial;}.fg{font-family:Georgia;}.ft{font-family:Tahoma;}.fl{font-family:Lucida Console;}.fs{font-family:'宋体';}.fw{font-family:'微软雅黑';}
.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}
.tdl{text-decoration:underline;}.tdn,.tdn:hover,a.tdl:hover{text-decoration:none;}
.g0{color:#000000;}.g3{color:#333333;}.g6{color:#666666;}.g9{color:#999999;}.red{color:red;}.wh{color:white;}
.f0{font-size:0;}.f10{font-size:10px;}.f12{font-size:12px;}.f13{font-size:13px;}.f14{font-size:14px;}.f16{font-size:16px;}.f20{font-size:20px;}.f24{font-size:24px;}
.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;}.vn{vertical-align:-2px;}.vimg{margin-bottom:-3px;}
.m0{margin:0;}.ml1{margin-left:1px;}.ml2{margin-left:2px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml20{margin-left:20px;}.mr1{margin-right:1;}.mr2{margin-right:2px;}.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr20{margin-right:20px;}.mt1{margin-top:1;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mb1{margin-bottom:1px;}.mb2{margin-bottom:2px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;}.ml-1{margin-left:-1px;}.mt-1{margin-top:-1px;}
.p1{padding:1px;}.pl1{padding-left:1px;}.pt1{padding-top:1px;}.pr1{padding-right:1px;}.pb1{padding-bottom:1px;}.p2{padding:2px;}.pl2{padding-left:2px;}.pt2{padding-top:2px;}.pr2{padding-right:2px;}.pb2{padding-bottom:2px;}.pl5{padding-left:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}.pr5{padding-right:5px;}.pb5{padding-bottom:5px;}.p10{padding:10px;}.pl10{padding-left:10px;}.pt10{padding-top:10px;}.pr10{padding-right:10px;}.pb10{padding-bottom:10px;}.p20{padding:20px;}.pl20{padding-left:20px;}.pt20{padding-top:20px;}.pr20{padding-right:20px;}.pb20{padding-bottom:20px;}
.rel{position:relative;}.abs{position:absolute;}
.dn{display:none;}.db{display:block;}.dib{-moz-inline-stack:inline-block; display:inline-block;}.di{display:inline;}
.ovh{overflow:hidden;}.ovs{overflow:scroll;}.vh{visibility:hidden;}.vv{visibility:visible;}
.lh14{line-height:14px;}.lh16{line-height:16px;}.lh18{line-height:18px;}.lh20{line-height:20px;}.lh22{line-height:22px;}.lh24{line-height:24px;}
.fix{*zoom:1;}.fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}.z{_zoom:1;}

上面的样式是有简单的分类的，某种意义上讲，CSS库与js库属于类似的东西。

关于此样式库，您可以直接在您的页面头部&head>标签内嵌入如下代码：

<link href="http://www.zhangxinxu.com/study/css/zxx.lib.css" type="text/css" />

如果您想下载此CSS文件，您可以狠狠地点击这里：zxx.lib.css(右键-[目标|链接另存为])。您可以随意修改，如果能保留我的一个个人信息，那真是感激不尽~~