css优化总结

一、css命名规则：

         1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或——

         2、命名避免使用中文拼音，应该采用更加简洁有语义的英文单词进行组合

         3、命名注意缩写，但是不能盲目缩写，具体请参加常见的命名规则

         4、不允许通过1、2、3等序号进行命名

         5、避免class和id重名

         6、id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id

         7、class用于标识某一个类型的对象，命名必须言简意赅

         8、尽可能提高代码模块的复用，样式尽量用组合的方式

         9、规则名称中不该包含颜色（red/blue），定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。

二、csss书写规范

     1、排版规范

        （1）使用4个空格，而不使用tab或者混用空格+tab作为缩进；

        （2）规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一；

          单行形式书写风格的排版约束

                      （1）如果是在html中写内联的css,则必须写成单行；

                      （2）每一条规则的大括号{}前后都要加空格；

                      （3）属性名冒号之前不加空格，冒号之后加空格；

                      （4）每一个属性值后必须添加分号；并且分号后加空格；

                      （5）多个selector共用一个样式集，则多个selector必须写成多行形式；

          多行形式书写风格的排版约束

                       （1）每一条规则的大括号{}前后都要加空格；

                       （2）多个selector共用一个样式集，则多个selector必须写成多行形式；

                       （3）每一条规则结束的大写}必须与规则选择器的第一个字符对齐；

三、属性编写顺序

              （1）显示属性：display/list-style/position/float/clear...

              （2）自身属性（盒模型）：width/height/margin/padding/border

              （3）背景：background

              （4）行高：line-height

              （5）文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...

              （6）其他：cursor/z-index/zoom/overflow

              （7）css3属性：transform/transition/animation/box-shadow/border-radius

              （8）如果使用css3的属性，如果有必要加入浏览器前缀，则按照 -webkit-/-moz-/-ms-/-o-/std的顺序进行添加，标准属性写在最后。

               （9）链接的样式请严格按照如下顺序添加：a:link  -->  a:visited  -->  a:hover  -->  a:active

四、代码优化

          （1）合并margin、padding、border的left/top/right/bottom的设置，尽量使用短命名。

          （2）选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式的设置。

          （3）注意选择器的性能，不要使用低性能的选择器，减少使用子代、后代选择器。

          （4）禁止在css中使用*选择符

          （5）除非必须，否则，一般有class或id的，不需要再写上元素对应的tag

          （6）0后面不需要单位，比如0px可以省略成0,0.8px可以省略成.8px

          （7）如果是16进制表示颜色，则颜色取值应该大写

          （8）如果可以，颜色尽量用三位字符来表示，例如#AABBCC写成#ABC

          （9）如果没有边框时，不要写成border:0,应该写成border:none

          （10）尽量避免使用AlphaImageLoader

          （11）在保持代码解耦的前提下，尽量合并重复的样式

          （12）background、font等可以缩写的属性、尽量使用缩写形式。

五、css Hack 的使用

         减少使用css hack.

            （1）区别属性（样式属性前缀法）：

                     IE6              _property:value

                    IE6/7            *property:value

                  IE6/7/8/9         property:value\9

             （2）区别规则（选择符前缀法）：

                     IE6                *html .test{...}

                     IE7                *+html .test{...}

                                          *:first-child+html .test{...}

             （3）IE条件注释法

                      只在IE下生效                  <!--[if IE]>...<![endif]-->

                      只在IE6下生效                <!--[if IE6]>...<![endif]-->

                      只在IE6以上生效             <!--[if gt IE6]>...<![endif]-->

           （6）iPhone/mobile区别

                   max-width  最大宽度 ；device-width 设备宽度；orientation 屏幕定向(属性值：landscape 横屏；portrait 竖屏)

                       （1）@media screen and (max-device-width:480px){...}

                       （2）<link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)" href="..."/>

六、低权重原则

         css的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。

         权重的规则是这样的：HTML标签的权重是1，class的权重是10，id 的权重是100；

         例如：div .test{...}的权重是1+10=11

                 p span{...}的权重是1+1=2

七、css sprite

       （1）它能合并的只能是用于背景的图片，对于<img src="..."/>设置的图片，是不能合并到css sprite 大图中

       （2）对于横向和纵向都要平铺的图片，也不能使用css sprite;如果是横向平铺的，只能将所有横向平铺的图片合成一张图片。

       （3） 图片要排列得紧凑些，同时保证不会影响扩展性。