良好的css结构对项目后期维护以及开发的作用不言而喻，在我几次的项目中，体会尤为深刻，将自己在css架构的过程中的一些想法、思路分享、愿与所有同行多多交流，共同进步。

1：reset.css：全局样式这是必须的，大家都懂得。建议使用最简洁的样式：

body{
    line-height:1.4;
}
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;
}
a img{border:0;}

一般网站引用的reset.css相对比较大，例如下面的一段，个人感觉没必要，毕竟上面的引用也没遇到过兼容性问题，引用上面的足以。虽然很多人说引用下面的对网站加载css速度影响不大，没必要纠结于引用那一套reset.css。但是能简则简么，能优化一点算一点。

 1 html, body, div, span, applet, object, iframe, 
 2 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
 3 a, abbr, acronym, address, big, cite, code, 
 4 del, dfn, em, font, img, ins, kbd, q, s, samp, 
 5 small, strike, strong, sub, sup, tt, var, 
 6 b, u, i, center, dl, dt, dd, ol, ul, li, 
 7 fieldset, form, label, legend, 
 8 table, caption, tbody, tfoot, thead, tr, th, td { 
 9 margin: 0; 
10 padding: 0; 
11 border: 0; 
12 outline: 0; 
13 font-size: 100%; 
14 vertical-align: baseline; 
15 background: transparent; 
16 }

 

2：网站通用样式库，例如下面，只截取部分代码：

.fn-zf1{z-index: -1} .fn-z10{z-index: 10} .fn-z11{z-index: 11}    .fn-z12{z-index: 12}  .fn-z13{z-index: 13}  .fn-z14{z-index: 14}  .fn-z20{z-index: 20}
.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}

这种方式在开发的过程中非常有作用，修改目标元素的样式，涉及到上方样式的，直接添加class，方便快捷，节省css代码量。

3：小图标样式：

之前我们的小图标是这样合并的（如下图），目标元素设置小图标背景，需要测量左、上距离，距离是固定的，若是调整图片，那就出现大问题了，很耽误时间。

合理的做法应该是这样的：

我们命名为：.u00{background:},.u01{}  ,让我们从小图标的样式计算中解脱出来，无论图标变换位置，还是大小调整，我们只关注于在目标元素添加相应的class即可。

4：网站通用样式：例如本项目的常用的颜色方案，按钮，文本框、圆角、a连接下划线 等。(下面的代码只取用部分为例)

.blue{
 background:#3399cc;  
}
.bluehover:hover{
 background:##2EBBFE;
}
.grey{
 background: #909090;
}
.greyhover:hover{
　background: #B0AFAF;
}
.button{
display:inline-block;
text-align:center;
........
}

我们要写一个蓝色带hover属性的按钮为例子,在目标元素class加 .blue .bluehover .button即可。

类似的，每个网站中需要用到的通用样式都不一样，可以根据自己的实际需求分析通用样式。

5：网站的模板样式、组件样式均可单独分离出来。

5：单页面结构：不同页面的样式。