一.注释

统一采用 :/* 注释内容 */

 

二.命名

    1.常用命名(多查单词)

        参考命名规范.doc

2.选择器

 1>

       [建议] 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。

       类型选择器避免同时使用标签、ID和class作为定位一个元素选择器;从性能上考虑也应尽量减少选择器的层级。

        /* 不推荐 */  ul#example { }  div.error { }

        /* 推荐 */    #example { }  .error { }

 2>

       连字符CSS选择器命名规范

       a.长名称或词组可以使用中横线来为选择器命名。

       b.不建议使用“_”下划线来命名CSS选择器。

  浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)

         能良好区分JavaScript变量命名(JS私有变量命名是用“_”)

      c. 不要随意使用Id

  id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用

三、属性编写顺序(只是建议,主要看个人习惯)

显示属性:display/list-style/position/float/clear /z-index… 

自身属性(盒模型):width/height/margin/padding/border 

背景:background 

行高:line-height 

文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content… 

其他:cursor/z-index/zoom/overflow 

CSS3属性:transform/transition/animation/box-shadow/border-radius 

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

四、编码规范

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

如果是16进制表示颜色,则颜色取值应该大写。 

如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC 。 

如果没有边框时,不要写成border:0,应该写成border:none 。

 

注:更多详细的规范参考以下网址,这里只是提供一个建议,主要还是看个人的编码风格,如果有自己的更加简洁明了性能好的编码习惯可以用自己的就好。供参考。

spec/css-style-guide.md at master · ecomfe/spec · GitHub