属性编写顺序
推荐的样式编写顺序
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
参考资料
常用的css命名
浏览器兼容性问题