CSS编码规范(二)

属性编写顺序

推荐的样式编写顺序

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

7. CSS3属性：transform / transition / animation / box-shadow / border-radius 

8.链接的样式请严格按照：a:link   a:visited   a:hover   a:active   (LoVeHAte)的顺序添加

性能优化

1. 合并margin、padding、border、的-left / -top / -right / -bottom的设置，尽量使用短名称

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

3. 注意选择器的性能，不要使用低性能的选择器，例如：

div > * { }

ul > li > a { }

body.profile ul.tabs.nav li a { }

4. 禁止在CSS中使用*选择符

5. 除非必须，否则一般有class或id的，不需要写上元素对应的tag，例如：div#test{ width:100px; }

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

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

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

9. 如果没有边框，不要学成border: 0，应该写成border: none

10. 尽量避免使用AlphaImageLoader

11. 在保持代码解耦的前提下，尽量合并重复的样式，例如：

12. background、font等可以缩写的属性，尽量使用缩写形式

background： color  image  repeat  attachment  position；

font：style  weight  size/line-height  family;

CSS属性取值规范

字体大小 font-size

font-size目前人人CSS有一下几种类型：

  12px / 9pt / 1.2em / 150% / 1.7

现将font-size取值的单位类型约束如下：

   1. font-size必须以px或pt为单位，推荐使用px（注：pt为打印版字体大小设置）

   2. 不允许使用xx-small / x-small / small / medium / large / x-large / xx-large 等值

字体系列 font-family

目前font-family取值类型丰富多样，比如home-frame2-all-min.css中：

  为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，现将font-family统一约束如下：

1. font-family不允许在业务代码中随意设置

2. font-family目前取值为：

      

hack使用规范

重要原则：尽量少用hack，能不hack坚决不hack，不允许滥用hack

如果需要使用hack，请参考以下hack方式：

 区分规则

区分属性：

z-index取值规范

以下是首页的一些z-index取值比较大的属性设置统计：

其他z-index设置：

常用的CSS命名

其他

1. 字体名称清映射成对应的英文名，例如：黑体（SimHei）宋体（SimSun）微软雅黑（Microsoft Yahei）如果字体名称中有空格，则必须

    加单引号

2. 背景图片请合理使用cssprites，按照模块、业务、页面划分均可

3. css背景图片的文件类型，请按照以下原则保存：

3.1 如果背景图片有动画，则保存成gif

3.2 如果没有动画，也没有半透明效果，则保存成png-8

3.3 如果有半透明效果，则保存成png-24

4. 不要在HTML中加入标签来清理浮动，通过在浮动元素的父元素上添加.clearfix来清除浮动

5. 为了SEO和页面可用性，请使用text-indent来隐藏文本内容

6. 制作csssprites时，尽量把颜色相近的图标放在一起，存储为png-8格式，存储完以后还能用一些压缩工具进行无损压缩

7. 避免过小的背景图片平铺

8. 尽量少用！important 

9. 避免使用非一次性expression

参考资料

浏览器css3特效支持规范
http://www.w3school.com/cssref/css3_browserupport.asp

常用的css命名

http://www.w3school.com/cssref/css3_browserupport.asp

浏览器兼容性问题

http://wiki.xiaonei.com/pages/viewpage.action?pageId=16090142