高质量的CSS代码体现在三个方面：可读性和可维护性和高性能。对于“前端工程师”来说如何平衡“追求高性能”和“可维护性”是很值得思考的问题。
在本次博客中，将从以下八个方面来学习CSS性能优化中的各种技巧，以便自己将来可能用到好查阅，也分享给广大学习前端的小白朋友们。
（1）属性缩写
（2）语法压缩
（3）图片压缩
（4）选择器优化
（5）CSS模块化
（6）压缩工具
（7）CSS sprite技术
（8）性能评估
这些性能优化技能也是“真正的前端工程师”和“野生网页设计师”的重要分水岭之一。
1：属性缩写
对于属性缩写，从四个方面进行优化。
（1）盒模型缩写
在CSS盒子模型中，有3个重要的属性：border（边框），padding（内边距），margin（外边距）。
边框属性，需要定义三个方面：边框的宽度（border-width），边框的外观（border-style），边框的颜色（border-color）。对于边框，有2种写法，完整形和缩写形式。
①完整形式
{
border-1px;
border-style:solid;
border-color:red;
}
②缩写形式
{
border:1px solid red;
}
内边距padding和外边距margin都有top,left,right,bottom四个属性，他们的完整型都是padding或margin-(top,left,right,bottom)。
他们的缩写形式为：
padding(margin):长度值；
padding(margin):长度值1长度值2；
padding(margin):长度值1长度值2长度值3长度值4；
四个方向的顺序为顺时针顺序即top,right,bottom,left。
（2）背景缩写
CSS背景属性有background-color(背景颜色),background-image(背景图片),background-repeat(背景重复),background-attachment(背景图片固定还是滚动),background-position(背景图片的定位)。
①完整形式
{
background-image:url(" ");
background-repeat:no-repeat;
background-position:80px 40px;
}
②缩写形式
{
background:url(" ") no-repeat 80px 40px;
}
（3）字体缩写
CSS常用到的字体及文本属性有font-family(字体类型)，font-size(字体大小),font-weight(字体粗细),line-height(行高)。
①完整形式
{
font-family:"微软雅黑";
font-size:12px;
font-weight:bold;
line-height:1.5em;
}
②简写形式
{
font:"微软雅黑" 12px/1.5em bold;
}
注意：Ⅰ：如果使用字体简写形式，至少要指定font-famliy和font-size属性，其他属性如果没有指定则将自动使用默认值。 Ⅱ：在简写形式中，font-size和line-height值之间是需要加入斜杠“/”的。
（4）颜色值缩写
在CSS中，十六进制的颜色值是可以缩写的。如果每两位的值相同，可以缩写一半。例如“color:#000000”可以缩写为“color:#000”。
2：语法压缩
对于语法压缩，从以下7个方面进行优化。
（1）空白符
一般情况下，多个属性值直接必须要用空格，在CSS的编写中，书写方式有两种，纵向书写和横向书写。
纵向书写
#div
{
padding:10px;
border:1px solid red;
}
横向书写
#div{padding:10px;border:1px solid red;}
对于浏览器来说，两种书写方式完全等价，纵向书写代码方便阅读，横向书写则可以节省更多字符数。实际开发中，建议使用纵向书写，等到整站发布的时候，再使用工具压缩成横向书写方式。
（2）结尾符号
在CSS中，每一个选择器的样式都是用{}括起来，实际上，最后一个属性之后的结尾分号是不必要的，省略之后，对代码没有任何影响。
（3）url()的引号
在CSS中，像background-image、cursor等属性url()中的路径不需要添加引号。
（4）属性值为“0”
在CSS中，如果某一个属性取值为0，则这个属性值不需要添加单位。
（5）属性值为“以0开头的小数”
当一个属性的属性值是以0开头的小数时，可以把开头的0去掉。
（6）合并相同的定义
在CSS中，很多时候定义的规则会有相同的部分，可以使用群组选择器（并集选择器）来合并这些相同的样式，从而达到代码重用和精简代码的目的。
（7）利用继承进行合并
在CSS中，很多属性是可以继承的。
①文本相关属性：font-family,font-size,font-style,font-weight,font,line-height,text-align,text-indent,word-spacing。
②列表相关属性：list-style-image,list-style-position,list-style-type,list-style。
③颜色相关属性：color。
如果父元素的多个子元素都定义了相同的可继承属性，可以把这些相同的属性定义在父元素上，从而精简代码。
3：压缩工具
CSS文件分为“开发版”和“发布版”。发布版是将开发版进行合并和压缩之后，在网站运行时使用的。
CSS压缩工具有在线版、本地版和编辑器插件三种，推荐使用在线版的两个工具：CSS Compressor和YUI Compressor。
4：图片压缩
在实际开发中，JPRG、PNG和GIF是最常见的图片格式。深入理解这三种图片格式适合在哪种情况下使用，并且如何减少图片大小十分重要。
（1）JPEG 可以很好的处理大面积色调的图像，适合存储颜色丰富的复杂图像，如照片、高清图片等。此外，JPEG不支持透明。
（2）PNG 是一种无损格式，可以无损压缩以保证页面打开速度。PNG支持透明。
（3）GIF 格式图像效果较差，但可以制作动画。
图片的传输量在一个页面的传输量中往往占的比重很高，因此对图片大小的压缩尤为重要，图片压缩的很多，以在线工具居多，推荐两款在线工具。
①JPEG：推荐JPEGmini
②PNG：推荐TinyPNG
5：高性能的选择器
不同的选择器其实性能是不一样的，了解选择器在浏览器中的解析原理以及不同选择器的解析速度，能够让我们的CSS性能速度锦上添花。
（1）选择器在浏览器的解析原理
#column .content div{color:Red;}
一般情况下，我们都是从左到右阅读代码，因此对于上面这行代码，也会习惯性地以为浏览器是从左到右进行解析的：首先找到id为column的元素，然后再查找该元素下面class为content的元素，最后在已经匹配的元素下查找所有的div元素。但是，事实上却恰相反，浏览器对选择器规则是从右到左进行解析的：首先查找所有的div元素，然后再查找该div元素是否存在具有content类的父元素，最后在已经匹配的父元素中继续向上查找祖元素是否含有id为column的元素。
（2）不同选择器的解析速度
#column .content div{.....}
#column .test{.....}
#test{.....}
如果选择器选中都是同一个元素，那么性能最好的是第三个，第一个性能最差。由于第三个选择器直接使用id选择器，而id在整个页面具有唯一性，因此可以快速定位。第一个选择器需要先匹配所有的div元素，对于一个页面来说，这个是不小的匹配量。
浏览器解析选择器的原则是从右到左的，因此我们书写的最右边的选择器，被称之为关键选择器。这个关键选择器，对于执行效率有决定性的影响，对CSS选择器的匹配效率从高到低做了一个排序。
①id选择器 ②class选择器 ③元素选择器 ④相邻选择器 ⑤子代选择器 ⑥后代选择器
⑦通配符选择器 ⑧属性选择器 ⑨伪类选择器
如果想要更好地使用高性能的选择器，需要注意以下四个技巧。
①不要使用通配符
在选择器中，通配符*一般用于选取页面中所有元素。例如“ *{ } ”表示选取页面所有元素，“#wrapper *{｝”表示选取ｉｄ为ｗｒａｐｐｅｒ元素下面的所有子元素。
②不要再ｉｄ选择器以及ｃｌａｓｓ选择器前添加元素名
元素的ｉｄ在一个页面中具有唯一性，因此在ｉｄ选择器前添加元素名是多余的，同时也增加了匹配量。元素的ｃｌａｓｓ不具有唯一性，如果在ｃｌａｓｓ选择器前添加元素名，则表示选择某一个ｃｌａｓｓ的某一种元素。除非是迫不得已的情况，否则尽量不要使用“ｃｌａｓｓ选择器添加元素名”。
ｅｇ：
／＊多余的写法＊／
ｄｉｖ＃ｗｒａｐｐｅｒ｛ｆｏｎｔ－ｓｉｚｅ：１２ｐｘ；｝
／＊正确的写法＊／
＃wrapper｛ｆｏｎｔ－ｓｉｚｅ：１２ｐｘ；｝
③选择器最后不要超过三层，位置靠右的选择器条件尽可能精确
选择器的层级越多，浏览器解析时匹配的次数就越多，因而速度就越慢。因此在定义选择器时，要尽量让选择器的层级少一些，最好不要超过３层。
④避免使用后代选择器，尽量少用子代选择器
后代选择器匹配量较大，应该避免使用，如果非要用的话，建议用子代选择器代替。但是子代选择器匹配量也不小，如果有其他选择器如ｉｄ选择器或ｃｌａｓｓ选择器等代替，也尽量少用子选择器。