css - 编码规范

属性顺序

1、定位、显示：position  top  float  clear  clip  z-index  display  visibility  list-style

2、盒模型：width  min-width  box-sizing  padding  margin  overflow

3、字体、文本：font  color  line-height  text-align  letter-spacing

4、装饰：border  outline  background  opacity  cursor

5、效果：transition  transform  animation

简写数值、颜色值

1、font-size: .16rem;  省略小数点前的0

2、margin: 10px 0 0 10xp;  省略0的单位

3、color: #CCC;  省略颜色值相同的后3位

单行写完一个选择器定义

.g-header{width: 950px; height: 70px; background-color: #666;} ?不超过3个以上.g-header { ???position: relative; ???width: 950px; ???height: 70px; ???color: #FFF; ???background-color: #666;} ?超过三个以上空行

使用单引号

.g-header{background: url(images/pic.jpg);} ?省略url中的引号.g-header:after{content: ‘.‘;} ?需要引号的地方使用单引号

私有在前，标准在后

.m-box{ ???-webkit-box-shadow: 0 0 0 #000; ???-moz-box-shadow: 0 0 0 #000; ???box-shadow: 0 0 0 #000;}

注释

/** 块级注释*//* 单行注释 */

选择器顺序

1、从大到小(范围)

2、从低到高(基本、伪类)

3、从先到后(结构的先后)

4、从父到子(结构的嵌套)

选择器等级

1、行内样式

2、id

3、类

4、标签

5、伪类

style="" > #id .class > #id tag > #id > .class tag > .class > tag tag > tag

避免耗性能的属性

.class {*color: expression(this.parentNode.currentStyle.color);}.class {width: expression(this.width>100?‘100px‘:‘auto‘);}.class {filter: alpha(opacity=50);}

选择器合并

.g-header, .g-main, .g-footer {color: #FFF;}

图片优化

1、图片质量要求高且无透明，使用jpg

2、图片质量要求高且需要透明，使用png24

3、图片要求一般无论有无透明，使用png8

4、动画图片，使用gif或css3或svg或canvas

6、图标，做成字体文件或css3文件或svg文件

5、使用工具压缩图片

多图合并

多个小图标可以合并成一张图片，但合并后不超过50k

css使用

1、避免hack

2、css可以做到，不要使用js

3、写完css代码需要压缩最小文件