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代码需要压缩最小文件