一.注释
统一采用 :/* 注释内容 */
二.命名
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
浙公网安备 33010602011771号