热身
对于CSS的优化，网络上分享的确实找不到什么系统的，整理下平时的积累。
主要从以下几个方面：
1. CSS架构
关于如何处理网站的CSS，各个网站做法都不一样，一般分为reset.css, main.css, content.css，然后每个活动页面一个单独的CSS，也是我最常用的。
- 关于CSS reset
CSS reset血多基本上是不需要的，反而增加了页面CSS 的overwrite，有些常用标签我也是会简单重置一下的，而且会避免overwrite（样式重写），以保证样式最精简，渲染最高效。
- CSS通用样式库
CSS通用样式库就是可以在任何网站使用的CSS样式库
- 网站CSS样式库
根据当前实际的项目内容指定的。例如，文字链接颜色是什么，文字链接经过的样式是什么；一些常用的背景色样式，常用的边框样式等，以及一些高宽等。按照我的经验，网站CSS样式库又可以架构为以下几部分：
网站常见颜色
网站常见padding属性、margin属性
网站常见width属性、height属性
网站公共结构样式
单页面的精细结构
2. css样式分离
样式的精简与重用
eg：
.dib{display:inline-block;}
.bdd border:1px solid #ddd;}
.bgf7{background:#f7f7f7;}
.p20_40{padding:20px 40px;}
字面上很容易理解，就是把这段样式分离成一个一个单独的样式，这样但是，要实现一个复杂的效果，HTML代码量就是非常庞大，一切都是权衡，何时分离，哪些要分离？样式精简与重用仅仅是通过分离吗。
这类样式库可惜细分“通用库”和“当前项目库”等。
样式的独立拆分，使得各种效果可以自由组合，这是有别于一个class类覆盖多个CSS属性的做法的。样式的独立拆分，精简的CSS文件，每个样式的重用性可谓发挥到的最大，同时，页面的后期维护变得异常轻松，样式冲突的可能性也是非常低的。
3. css命名
面向属性的命名方法
也就是上面说的分离，分离为什么可以让样式的重用性放大至最大，就是因为分离后样式的命名就是样式本身，针对自身属性的一种命名方式，只会overwrite，不会冲突。
eg：
.tr{text-align:right;}
.pb8{padding-bottom:8px;}
限制重用
会使用层级(.test .test1)，会使用标签(ul.test),这样限制越多，越抑制了CSS的重用性
统一前缀
减小类名的长度，间接影响CSS文件大小