1. 每個(gè)樣式屬性后（必須）加 ";"
? ? ?方便壓縮工具"斷句"。
2. Class命名中（禁止）出現(xiàn)大寫(xiě)字母，（必須）采用”?-?“對(duì)class中的字母分隔，如：
?正確的寫(xiě)法? .header-title { font-weight: bold; }
不推薦的寫(xiě)法? .headerTitle { font-weight: bold; }
用"-"隔開(kāi)比使用駝峰是更加清晰。
產(chǎn)品線-產(chǎn)品-模塊-子模塊，命名的時(shí)候也可以使用這種方式。
3. 空格的使用，以下規(guī)則（必須）執(zhí)行：
.hotel-content { font-weight: bold; }
選擇器與{?之前（必須）要有空格
屬性名的:?后（必須）要有空格
屬性名的:?前（禁止）加空格
4. 多選擇器規(guī)則之間（必須）換行
當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行
/* 推薦的寫(xiě)法 */?
a.btn,
input.btn,
input[type="button"] {? ? ......
}
5.（禁止）將樣式寫(xiě)為單行, 如
.hotel-content {margin: 10px; background-color: #efefef;}
6.（禁止）向?0?后添加單位, 如：
.obj {? ? left: 0px;}
7. （禁止）使用css原生import
使用css原生import有很多弊端，比如會(huì)增加請(qǐng)求數(shù)等....
8.（推薦）屬性的書(shū)寫(xiě)順序, 舉個(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), 常見(jiàn)的有：displaypositionlefttopfloat等
盒模型相關(guān), 常見(jiàn)的有：widthheightmarginpaddingborder等
其他屬性
9.（推薦）當(dāng)編寫(xiě)針對(duì)特定html結(jié)構(gòu)的樣式時(shí)，使用元素名+?類名
/* 所有的nav都是針對(duì)ul編寫(xiě)的 */
?ul.nav {? ? ......
}
".a div"和".a div.b"，為什么后者好？如果需求有所變化，在".a"下有多加了一個(gè)div，試問(wèn)，開(kāi)始的樣式是不是會(huì)影響后來(lái)的div啊~
10. （禁止）使用行內(nèi)（inline）樣式
<p style="font-size: 12px; color: #FFFFFF">開(kāi)心</p>
像這樣的行內(nèi)樣式，最好用一個(gè)class代替。又如要隱藏某個(gè)元素，可以給他加一個(gè)class
.hide {? ? display: none;}
盡量做到樣式和結(jié)構(gòu)分離~
