[导读] 让网站单CSS谁都会，关键是为何可以使用单CSS文件，这个CSS文件不会很大吗，如果一个网站有400个页面，那么这个CSS文件岂不要数百K。非也，在网站页面风格一致..

正规网站制作CSS架构过程
　　1、整体概述
　　页面布局与文章内容显示需要，我将整体架构做成了一张图片。
　　2、关于CSS reset
　　CSS reset(css重置)基本上是不需要的，至少可以说80%的的CSS reset都是没有必要的，反而增加了页面CSS 的overwrite，不是一概鄙弃CSS reset，有些常用标签也是会简单重置一下的，而且会避免overwrite（样式重写），以保证样式最精简，渲染最高效。
　　3、关于CSS通用样式库
　　在“CSS样式分离之再分离”一文中曾提到过CSS通用样式库。所谓CSS通用样式库就是可以在任何网站使用的CSS样式库。
　　4、网站CSS样式库
　　这里的样式是根据当前实际的项目内容指定的。例如，文字链接颜色是什么，文字链接经过的样式是什么；一些常用的背景色样式，常用的边框样式等，以及一些高宽等。按照我的经验，网站CSS样式库又可以架构为以下几部分：
　　①网站常见颜色，尤其是链接色②网站常见背景色③网站常见边框色，这里类似于CSS 通用库中的margin属性，需拆分。④网站遗留的单margin属性，以供之后类似布局或需要的地方使用。⑤网站遗留的单padding属性，是单属性，且不可从通用元素中抽取单独的padding值，否则是给自己挖火坑。⑥网站遗留的width属性，在流体布局思想下，宽度是有限的，是珍贵的，需好好利用。⑦网站常用的一些height属性。
　　5、网站通用小图标样式集
　　小图标的样式合并是普遍处理的较好的，由于其规律可循，所以经常在CSS文件较上的位置看到有关小图标的CSS合并样式，这在SNS网站中很是常见。一般合并样式部分样式为{background:url(xx.png) no-repeat;}，分离部分的样式是{background-position:x, y;}，就实现而言，我觉得没有多少说头，只是命名有些自己的见解。
　　6、网站通用样式
　　这里的“网站通用样式”可以说与“网站通用样式库”最为对立的两部分。网站通用样式专指“独立元素”的通用样式，所谓“独立元素”指的是网站通用的导航，菜单，按钮，选项卡，文本框装饰，图片装饰，圆角处理等等。网站通用样式的代码量在整个CSS文件中所占据的比重是相当大的，如果您的CSS文件中发现CSS通用样式只占整个CSS文件的一小部分，尤其网站项目较大时，那就需要引起警惕，可能最后的结果就是CSS文件超负荷，最后反而一团糟。
　　7、网站公共结构样式
　　所谓“网站的结构样式”主要指的是最外框div的样式，一般限制网站的宽度(960~990不等)，还有就是网站的分栏布局样式，这里的样式仅仅针对主体结构，还包括网站的头部的一些公用结构，底部的样式结构等。强烈建议公共结构仅仅定宽定高，设置浮动属性，切不可在结构样式上添加margin或是padding属性，这会使网站的公共结构的重用性大大降低！
　　8、单页面的精细结构
　　对于中型大型网站，网站制作可能要花3~4天甚至更多的时间分析页面设计图，处理CSS Sprite，架构网站的CSS，这段时间不写任何页面，就是处理网站唯一的CSS文件。所谓“磨刀不误砍柴功”，站在整站的角度上去思考CSS是非常重要的，这可以让你避免迷路，有助于写出精简高效的样式代码。