作者:李靖
原文地址:http://www.cnblogs.com/hustskyking/p/css-spec.html
"字是門面書是屋"另患,我們不會(huì)去手寫代碼,但是敲出來(lái)的代碼要好看蛾绎、有條理昆箕,這還必須得有一點(diǎn)約束~
團(tuán)隊(duì)開(kāi)發(fā)中,每個(gè)人的編碼風(fēng)格都不盡相同租冠,有時(shí)候可能存在很大的差異鹏倘,為了便于壓縮組件對(duì)代碼進(jìn)行壓縮以及書寫樣式的規(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)大寫字母,(必須)采用” - “對(duì)class中的字母分隔儒拂,如:
/* 正確的寫法 */
.hotel-title {
font-weight: bold;
}
/* 不推薦的寫法 */
.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è)選擇器占一行
/* 推薦的寫法 */
a.btn,
input.btn,
input[type="button"] {
......
}
6. (禁止)將樣式寫為單行, 如
.hotel-content {margin: 10px; background-color: #efefef;}
單行顯示不好注釋褥影,不好備注池户,這應(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. (推薦)屬性的書寫順序, 舉個(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)的有:
display
position
left
top
float
等 - 盒模型相關(guān), 常見(jiàn)的有:
width
height
margin
padding
border
等 - 其他屬性
按照這樣的順序書寫可見(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è)趯慶ss的時(shí)候揉燃,把元素的定位放在前頭,首先讓瀏覽器知道該元素是在文本流內(nèi)還是外约急,具體在頁(yè)面的哪個(gè)部位零远,接著讓瀏覽器知道他們的寬度和高度,border等這些占用空間的屬性厌蔽,其他的屬性都是在這個(gè)固定的區(qū)域內(nèi)渲染的遍烦,差不多就是這個(gè)意思吧~(@frec)
** 推薦文章**:
10. 小圖片(必須)sprite 合并
推薦文章:NodeJs智能合并CSS精靈圖工具iSpriter
11. (推薦)當(dāng)編寫針對(duì)特定html結(jié)構(gòu)的樣式時(shí),使用元素名 + 類名
/* 所有的nav都是針對(duì)ul編寫的 */
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)選擇元素*
/*別這樣寫*/
* {
margin: 0;
padding: 0;
}
這樣寫是沒(méi)有必要的危彩,一些元素在瀏覽器中默認(rèn)有margin或padding值,但是只是部分元素泳桦,沒(méi)有必要將所有元素的margin汤徽、padding值都置為0。
17. 鏈接的樣式灸撰,(務(wù)必)按照這個(gè)順序來(lái)書寫
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)步?庹!厘唾!