作者：李靖
原文地址：http://www.cnblogs.com/hustskyking/p/css-spec.html
"字是門(mén)面書(shū)是屋"，我們不會(huì)去手寫(xiě)代碼，但是敲出來(lái)的代碼要好看、有條理，這還必須得有一點(diǎn)約束~
團(tuán)隊(duì)開(kāi)發(fā)中，每個(gè)人的編碼風(fēng)格都不盡相同，有時(shí)候可能存在很大的差異，為了便于壓縮組件對(duì)代碼進(jìn)行壓縮以及書(shū)寫(xiě)樣式的規(guī)范統(tǒng)一和美觀，很有必要大家一起來(lái)研究一套基本規(guī)范（模板）！
我先拋磚引玉。（禁止）、（必須）等字眼，在這里只是表示強(qiáng)調(diào)，未嚴(yán)格要求。
前端規(guī)范之CSS
1. tab鍵用（必須）四個(gè)空格代替
因?yàn)樵诓煌到y(tǒng)的編輯工具對(duì)tab解析不一樣，windows下的tab鍵是占四個(gè)空格的位置，而在linux下會(huì)變成占八個(gè)空格的位置（除非你自己設(shè)定了tab鍵所占的位置長(zhǎng)度）。
一些童鞋可能會(huì)有疑問(wèn)，tab鍵換成四個(gè)空格，多麻煩啊~
其實(shí)不然，我平時(shí)用sublime text比較多，在這個(gè)工具中可以對(duì)tab鍵進(jìn)行設(shè)置。
選擇Indent Using Spaces，Tab Width：4兩項(xiàng)即可。
2. 每個(gè)樣式屬性后（必須）加 ";"
方便壓縮工具"斷句"。
3. Class命名中（禁止）出現(xiàn)大寫(xiě)字母，（必須）采用” - “對(duì)class中的字母分隔，如：
/* 正確的寫(xiě)法 */
.hotel-title {
font-weight: bold;
}
/* 不推薦的寫(xiě)法 */
.hotelTitle {
font-weight: bold;
}
- 用"
-"隔開(kāi)比使用駝峰是更加清晰。 - 產(chǎn)品線-產(chǎn)品-模塊-子模塊，命名的時(shí)候也可以使用這種方式（@Artwl）
4. 空格的使用，以下規(guī)則（必須）執(zhí)行：
.hotel-content {
font-weight: bold;
}
- 選擇器與
{之前（必須）要有空格 - 屬性名的 : 后（必須）要有空格
- 屬性名的 : 前（禁止）加空格
一個(gè)原因是美觀，其次IE 6存在一個(gè)bug， 戳bug
5.多選擇器規(guī)則之間（必須）換行
當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行
/* 推薦的寫(xiě)法 */
a.btn,
input.btn,
input[type="button"] {
......
}
6. （禁止）將樣式寫(xiě)為單行, 如
.hotel-content {margin: 10px; background-color: #efefef;}
單行顯示不好注釋?zhuān)缓脗渥?，這應(yīng)該是壓縮工具的活兒~
7. （禁止）向 0 后添加單位, 如：
.obj {
left: 0px;
}
只是為了統(tǒng)一。記住，綠色字表強(qiáng)調(diào)，不表強(qiáng)制！
8. （禁止）使用css原生import
使用css原生import有很多弊端，比如會(huì)增加請(qǐng)求數(shù)等....
推薦文章：Don't use @import
9. （推薦）屬性的書(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等 - 其他屬性
按照這樣的順序書(shū)寫(xiě)可見(jiàn)提升瀏覽器渲染dom的性能
簡(jiǎn)單舉個(gè)例子，網(wǎng)頁(yè)中的圖片，如果沒(méi)有設(shè)置width和height，在圖片載入之前，他所占的空間為0，但是當(dāng)他加載完畢之后，那塊為0的空間突然被撐開(kāi)了，這樣會(huì)導(dǎo)致，他下面的元素重新排列和渲染，造成重繪（repaint）和回流（reflow）。我們?cè)趯?xiě)css的時(shí)候，把元素的定位放在前頭，首先讓瀏覽器知道該元素是在文本流內(nèi)還是外，具體在頁(yè)面的哪個(gè)部位，接著讓瀏覽器知道他們的寬度和高度，border等這些占用空間的屬性，其他的屬性都是在這個(gè)固定的區(qū)域內(nèi)渲染的，差不多就是這個(gè)意思吧~(@frec)
** 推薦文章**：
10. 小圖片（必須）sprite 合并
推薦文章：NodeJs智能合并CSS精靈圖工具iSpriter
11. （推薦）當(dāng)編寫(xiě)針對(duì)特定html結(jié)構(gòu)的樣式時(shí)，使用元素名 + 類(lèi)名
/* 所有的nav都是針對(duì)ul編寫(xiě)的 */
ul.nav {
......
}
".a div"和".a div.b"，為什么后者好？如果需求有所變化，在".a"下有多加了一個(gè)div，試問(wèn)，開(kāi)始的樣式是不是會(huì)影響后來(lái)的div啊~
12. （推薦）IE Hack List
/* 針對(duì)ie的hack */
selector {
property: value; /* 所有瀏覽器 */
property: value\9; /* 所有IE瀏覽器 */
property: value\0; /* IE8 */
+property: value; /* IE7 */
_property: value; /* IE6 */
*property: value; /* IE6-7 */
}
當(dāng)使用hack的時(shí)候想想能不能用更好的樣式代替
13. （不推薦）ie使用filter,（ 禁止）使用expression
這里主要是效率問(wèn)題，應(yīng)該當(dāng)格外注意，咱們要少用燒CPU的東西~
14. （禁止）使用行內(nèi)（inline）樣式
<p style="font-size: 12px; color: #FFFFFF">靖鳴君</p>
像這樣的行內(nèi)樣式，最好用一個(gè)class代替。又如要隱藏某個(gè)元素，可以給他加一個(gè)class
.hide {
display: none;
}
盡量做到樣式和結(jié)構(gòu)分離~
15. （推薦）reset.css樣式
推薦網(wǎng)站：http://www.cssreset.com/
16.（禁止）使用""來(lái)選擇元素*
/*別這樣寫(xiě)*/
* {
margin: 0;
padding: 0;
}
這樣寫(xiě)是沒(méi)有必要的，一些元素在瀏覽器中默認(rèn)有margin或padding值，但是只是部分元素，沒(méi)有必要將所有元素的margin、padding值都置為0。
17. 鏈接的樣式，（務(wù)必）按照這個(gè)順序來(lái)書(shū)寫(xiě)
a:link -> a:visited -> a:hover -> a:active
18. 等你補(bǔ)充...
應(yīng)該說(shuō)在前面的話
- 對(duì)于不同的團(tuán)隊(duì)、不同的需求，編碼規(guī)范上有一些差異，這個(gè)很正常。
- 最后上線的代碼肯定不是上述遵從規(guī)范的，上線的代碼都會(huì)經(jīng)過(guò)打包和壓縮。
- 不同的人有不同的編碼風(fēng)格，當(dāng)你是一個(gè)人作戰(zhàn)的時(shí)候，你可以不用考慮這些，但是如果是團(tuán)隊(duì)開(kāi)發(fā)，有一個(gè)規(guī)范還是很有指導(dǎo)價(jià)值的~
這些規(guī)范是在團(tuán)隊(duì)開(kāi)發(fā)過(guò)程中，集思廣益總結(jié)出來(lái)的，不是很全面，如果你有好的建議，請(qǐng)?zhí)岢鰜?lái)，我們一起打造一個(gè)良好的前端生態(tài)環(huán)境！
后面我會(huì)陸續(xù)把HTML、JavaScript和LESS等規(guī)范羅列出來(lái)，大家共同進(jìn)步?。?！
