教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

UI培訓(xùn)之WEB前端規(guī)范---CSS規(guī)范

更新時(shí)間:2016年03月26日10時(shí)41分 來源:傳智播客UI培訓(xùn)學(xué)院 瀏覽次數(shù):

由于每個(gè)WEB開發(fā)者的編碼風(fēng)格不同，差異較大，為了便于代碼壓縮以及書寫樣式的規(guī)范統(tǒng)一和美觀，web前端工程師總結(jié)了一些前端規(guī)范，這里主要介紹CSS相關(guān)規(guī)范。
1. tab鍵用四個(gè)空格代替
因?yàn)樵诓煌到y(tǒng)的編輯工具對(duì)tab解析不一樣，windows下的tab鍵是占四個(gè)空格的位置，而在linux下會(huì)變成占八個(gè)空格的位置。
2.每個(gè)樣式屬性加英文分號(hào)“;”
方便壓縮工具"斷句"。
3. Class命名中不能出現(xiàn)大寫字母，采用"-"對(duì)class中的字母分隔
/* 正確的寫法 */
.hotel-title {
font-weight: bold;
}
/* 不推薦的寫法 */
.hotelTitle {
font-weight: bold;
}
4.空格的使用，執(zhí)行下列規(guī)則：
.hotel-content {
font-weight: bold;
}
選擇器與 { 之前要有空格
屬性名的 : 后要有空格
屬性名的 : 前不能加空格
一方面為了美觀，另一方面是避免ie6的bug
5.多選擇器規(guī)則之間要換行
當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行
/* 推薦的寫法 */
a.btn,
input.btn,
input[type="button"] {
......
}
6. 不能將樣式寫為單行
.hotel-content {margin: 10px; background-color: #efefef;}
單行顯示不便于注釋和備注 
7. 不要向 0 后添加單位（為了規(guī)范統(tǒng)一）
.obj {
left: 0px;
}
8. 不要使用css原生import
使用css原生import有很多弊端，比如會(huì)增加請(qǐng)求數(shù)
9. 屬性的正確書寫順序
.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的性能
10. 小圖片要與sprite 合并
11.當(dāng)編寫針對(duì)特定html結(jié)構(gòu)的樣式時(shí)，使用元素名 + 類名
/* 所有的nav都是針對(duì)ul編寫的 */
ul.nav {
......
}
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 */
}
13. ie不要使用filter，也不要使用expression
這里主要是為了注重效率
14.不要使用行內(nèi)（inline）樣式
<p style="font-size: 12px; color: #FFFFFF">W3Cfuns</p>
行內(nèi)樣式，最好用一個(gè)class代替。隱藏某個(gè)元素，可以加一個(gè)class 
.hide {
display: none;
}
盡量做到樣式和結(jié)構(gòu)分離
15. 使用reset.css樣式
16.不要全局設(shè)置magin和padding
/*別這樣寫*/
* {
margin: 0;
padding: 0;
}
沒有必要將所有元素的margin、padding值都置為0。
17. 鏈接的樣式，要按照這個(gè)順序來書寫 
a:link -> a:visited -> a:hover -> a:active



本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://metathetuscanyresort.com/ui 
0 分享到：
和我們?cè)诰€交談！