css规则(2)-优化css
css.jpg
广州这热天气越来越变态了，热！，回归正传，css是一门很有学问的知识，可能有些人会觉得css不过如此，我只需要记住几个常用属性的设置就可以掌握css，号称精通css了。但是，css不是表面看起来那样简单的，要写出性能更好，更简洁并且更加有拓展性的css没有积累和沉淀是不可能完成的。今天的主题是css优化方面，可能你在网上看到过类似文章，但我相信，我的这篇文章多少会对你有帮助的！
一、css引入方式
1、直接在标签中使用style书写css样式
2、html中使用style
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件
这四种方法，按理来说，我们用的最多的应该是第四种方法了，确实如此，样式与结构分离是最好的原则。第一第二种方案，有人觉得可能更加方便，不引入外部文件，减少了css文件的http请求，但是这种css的书写方式对页面的维护与调试造成更大的影响，是不建议采取的，当我们网页的css更多更大了，首先是不利于阅读的，其次，调试也是相对于外部css要困难的。第三种方法@import引入的css也是可以的。对于@import简单介绍一下：@import指定导入的外部样式表及其目标媒体。该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
例如
@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);
兼容性是非常不错的。基本上都支持，出来古老的IE6和IE7。言归正传。使用@import导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。@import影响css文件的加载速度，为了性能优化，我们使用link方式引入css。
二、css的简写
很多时候，我们书写的css样式里面会出现类似
div{ display:block; width:100%; margin-top:20px; margin-bottom:20px; margin-left:20px; margin-right:20px;}
1、当然了，这么简单的css简写，我相信大家是可以搞定的，我也只是来强调这个问题而已了。首先，我们知道div是块级元素，块级元素的display:block,当一个元素的display为block时候，那么它的width是100%;也就是说上面display:block;和width完全是可以省略的，还有，margin可以简写成margin:20px;简写四个值分别是上右下左，简写三个值就是上 左右 下，简写为一个。类似的css简写形式还有很多。例如
.class{ border-color:#fff; border-style:solid; border-width:1px;}
简写
.class{border:1px solid #fff;}
还有字体属性font,background,padding等等，对于那些可以简写的尽量精简代码。比如颜色值，建议用小写.class{color:#FFFFFF;}简写.class{color:#fff;}如果颜色每两位的值相同，可以缩写一半
2、有的属性值为0的时候，我们可以不加单位，例如
.class{ width:0; left:0;}
要养成写css都用简写形式，多去观察css代码中，有的东西是可以不要的，有的东西是可以简写优化的，千万不要觉得这没什么，积少成多的，厚积薄发。好的css书写习惯和更加精简的书写方式能节省css文件的大小，优化网站整体性能，更加容易阅读。
这些好处是会在以后的项目越做越大的时候体现出来。专业的人一看你写的css代码风格就能了解你的水平了。可能有的人书写css的时候喜欢按照相关的属性声明应当归为一组，一定顺序排列。这样书写也是可以很工整的，并且subline还有相关插件可以按照我们自己设置的规则去设置。个人觉得这个是完全可以的，样式写的很工整。（惭愧啊，我一直都是按照自己想法来排顺序的，对这种写法比较支持，虽然没有对样式文件减少大小）.
3、多利用css继承的特性，不用每一个选择器上都写一大堆可以从祖先元素基础下来的的属性，可以基础的属性有很多，例如
font、text-index、text-align、line-height、color、text-transform、word-spacing、visibility等等
我们也不需要去记住他们，css手册一查就可以了解了，并且我们用多了自然而然就可以很清楚的知道。可能有幸情况很特殊，例如我在a的父元素设置了color，为什么a的color没有继承下来呢？因为有些标签的属性有默认的值，例如表单元素，链接等等，具体可以参考下http://css.doyoe.com/
三、css背景精灵图
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个数，当然随之而来的增加内存消耗，CSS Sprites图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。
类似于上图，如果把一个一个图标都单独弄出来用的话，是非常方便的，但是，每多一个图片文件就是多一个HTTP请求了，为了更好的性能，建议在不是很复杂的情况下能用CSS Sprites就尽量用。
四、css选择器优化
说到这个css选择器的优化，我们应该要知道，浏览器对css选择器是怎么匹配的，比如 .class span 浏览器是怎么“定位”到span的。首先我们先抛出结论，css的匹配规则是从右往左的，没错，不是从左到右。css会先找到选择权最右边的那个选择符，然后再往左边不断往上找。这个 .class span中，首先会找到所有的span元素，然后再找span的父级元素是否有类名class，找不到再往祖先元素找，知道找到符合span的祖先元素为类名.class为止。最简单粗暴的方法就是直接给span一个类名，或者ID，但是那也是不现实的，只能说，我们要根据实际情况来找适合的解决方案了。
比如说，我们应该尽量减少css后台选择器过长的情况，这样的选择器效率是不高的。在页面上，建议同意用类名来命名，不要用ID，不是说ID不好，而是类名更加合适。
说到这个ID、Class之类的，随便了解下css选择器的优先级
ID:100
Class:10
Tag:1
css的权重中，ID是最大的，类名次之，标签最小。这个数字有什么用呢，举个例子
html
<div id="div" class="div">测试<div>
css
#div{ background:red}
.div{ background:orange;}
div{ background:yellow;}
如果不知道css选择器权重的话，我们可以会觉得div的背景颜色是yellow，因为后面的会覆盖前面所写的。但实际上不是得，div的背景是red，因为，ID权重为100，类名权重为10，标签最小为1，是按这个css的优先级来计算最后用什么样式的，如果是组合选择器的话，做加法运算就可以了。比如
#div a{} /*优先级101*/.div li{} /*优先级11*/body .div a{} /*优先级12*/
这个也是可以做为css优化的又一个点了，选择器性能越好，网站的性能就越好！建议选择器的嵌套最好不要超过三层。
五、减少css动画渲染的性能损耗
尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
-webkit-transform:tanslate3d(0,0,0);
3D变形会消耗更多的内存与功能，应确实有性能问题时采取使用它，兼在权衡
在条件允许情况下，尽可能少的使用box-shadow与gradient，他们对浏览器渲染性能损耗比较大，尤其在同一个元素同时使用了他们。
尽量的让动画元素不在文档流中，以减少重排（关于浏览器渲染页面是的重排与重绘，下次我们再讨论），这里简单说下
参考与伯乐在线文章http://blog.jobbole.com/46722/
浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别，但也有一定规则。简单讲，通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。
重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。
开发中，比较好的实践是尽量减少重排次数和缩小重排的影响范围。这部分讨论已经超出css了，我们先交流有关css的知识。
六、压缩css文件
最后写好样式后，还可以对css进行压缩，来减少css文件的体积。对于一个压缩文件，比如一个文件style.css，我们压缩后可以改为style.min.css,网上有很多在线工具，可以搜索一下自己喜欢的压缩工具，我个人喜好是用http://tool.oschina.net/codeformat/css
本文的全部内容就到这了，欢迎大家留言补充。会不定时的更新有关css优化的知识~
欢迎访问我的个人网站zhengyepan
原创文章，转载请注明出处，谢谢欢迎一起讨论交流
