css的好习惯

今天师父上了第一堂课，讲了一些关于浏览器处理css的事儿。也算是一种好的习惯吧~

  1、页面上用到的一些背景图片，如果是一些比较小的图片，应该把他们合成到一张图片上，然后通过background-position来设置背景图片的位置。

     这样做的好处是：a、一张图片的大小会比很多张分散的图片小

                           b、这样可以一次加载完图片，比如你做按钮的普通和hover状态时，如果用两张图片，那么在一些浏览器下，hover的时候明显有一个空白再切换图片的过程，这样是无法满足我们的要求的。而如果合成一张图片，通过background-position就不会有这种问题了。

                           c、如果多个css样式都会用到合成的图片，那么最后将它们放到一起来设置它们的背景图片。如div1,div2{background:url(..),no-repeat;}IE6下不会缓存图片，这样的话就避免了每次读到一个样式的时候都要重新加载同一张图片

      最主要的好处就是：减少浏览器与服务器之间的通信次数

 

  2、写css样式的时候，最好按照（display|list-style|position|float|clear等显示属性）->（width|height|margin|padding|border|background等自身属性，盒模型样式）->（color|line-height|font|text-decoration|text-align|vertical-align|white-space|other|text|content等文本属性）写 。

    当然并不代表非得按这个顺序写，但这种写法可以使css结构更清晰易读，修改起来比较方便。而且在团队项目中能更好地提高效率。

    ps:这种写法由Mozilla工程师推荐，先写显示属性，再写自身属性，再写文字属性，可以使css结构更清晰易读，修改起来比较方便。另外对渲染性能也有好处。

    所以一个好的习惯是很重要的。

谢谢各位提出的问题。

转载于:https://www.cnblogs.com/okbeng/archive/2011/08/03/css110803.html