屬性順序

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代碼需要壓縮最小文件

css - 編碼規範