• 每個(gè)樣式后面必須加“：”
  方便壓縮工具“斷句”
• class命名中禁止出現(xiàn)大寫字母，采用“-”對(duì)calss中的字母進(jìn)行分隔

.list-one {
    width: 100px;
}

• 空格的使用

.list-one {
    width: 100px;
}

選擇器與 { 之前必須要有空格屬性名的 : 后必須要有空格屬性名的 : 前禁止加空格

• 多選擇器規(guī)則之間（必須）換行

a.btn, 
input.btn, 
input[type="button"] 
{ 
      ...... 
}

• 禁止將樣式寫為單行

.hotel-content {margin: 10px; background-color: #efefef;}

• 禁止向0后面加單位，例如：

.obj { 
      left: 0px;
    }

• 禁止使用css原生import
  使用css原生import有很多弊端，比如會(huì)增加請(qǐng)求數(shù)等....

• 屬性的書寫順序, 舉個(gè)例子:

.hotel-content { 
        /* 定位 */ 
        display: block; 
        position: absolute; 
        left: 0; top: 0; 
        /* 盒模型 */ 
        width: 50px; 
        height: 50px; 
        margin: 10px; 
        border: 1px solid black; 
        / *其他* / 
        color: #efefef; 
}

定位相關(guān), 常見的有：display position left top float 等
盒模型相關(guān), 常見的有：width height margin padding border 等
其他屬性
按照這樣的順序書寫可見提升瀏覽器渲染dom的性能

• 小圖片（必須）sprite 合并
• 當(dāng)編寫針對(duì)特定html結(jié)構(gòu)的樣式時(shí)，使用元素名 + 類名

ul.nav {
     ...... 
}

.a div和.a div.b，為什么后者好？如果需求有所變化，在.a下有多加了一個(gè)div，試問，開始的樣式是不是會(huì)影響后來的div啊~

• 禁止使用行內(nèi)（inline）樣式
• 禁止使用"*"來選擇元素

* {
     margin: 0; 
     padding: 0;
}

這樣寫是沒有必要的，一些元素在瀏覽器中默認(rèn)有margin或padding值，但是只是部分元素，沒有必要將所有元素的margin、padding值都置為0。

• 鏈接的樣式，（務(wù)必）按照這個(gè)順序來書寫

a:link -> a:visited -> a:hover -> a:active