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

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

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

更新時間:2016年03月26日10時41分 來源:傳智播客UI培訓學院 瀏覽次數:

由于每個WEB開發(fā)者的編碼風格不同，差異較大，為了便于代碼壓縮以及書寫樣式的規(guī)范統(tǒng)一和美觀，web前端工程師總結了一些前端規(guī)范，這里主要介紹CSS相關規(guī)范。
1. tab鍵用四個空格代替
因為在不同系統(tǒng)的編輯工具對tab解析不一樣，windows下的tab鍵是占四個空格的位置，而在linux下會變成占八個空格的位置。
2.每個樣式屬性加英文分號“;”
方便壓縮工具"斷句"。
3. Class命名中不能出現大寫字母，采用"-"對class中的字母分隔
/* 正確的寫法 */
.hotel-title {
font-weight: bold;
}
/* 不推薦的寫法 */
.hotelTitle {
font-weight: bold;
}
4.空格的使用，執(zhí)行下列規(guī)則：
.hotel-content {
font-weight: bold;
}
選擇器與 { 之前要有空格
屬性名的 : 后要有空格
屬性名的 : 前不能加空格
一方面為了美觀，另一方面是避免ie6的bug
5.多選擇器規(guī)則之間要換行
當樣式針對多個選擇器時每個選擇器占一行
/* 推薦的寫法 */
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有很多弊端，比如會增加請求數
9. 屬性的正確書寫順序
.hotel-content {
/* 定位 */
display: block;
position: absolute;
left: 0;
top: 0;
/* 盒模型 */
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid black;
/ *其他* /
color: #efefef;
}
•定位相關，常見的有：display position left top float 等
•盒模型相關，常見的有：width height margin padding border 等
•其他屬性
按照這樣的順序書寫可見提升瀏覽器渲染dom的性能
10. 小圖片要與sprite 合并
11.當編寫針對特定html結構的樣式時，使用元素名 + 類名
/* 所有的nav都是針對ul編寫的 */
ul.nav {
......
}
12. IE Hack List
/* 針對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.不要使用行內（inline）樣式
<p style="font-size: 12px; color: #FFFFFF">W3Cfuns</p>
行內樣式，最好用一個class代替。隱藏某個元素，可以加一個class 
.hide {
display: none;
}
盡量做到樣式和結構分離
15. 使用reset.css樣式
16.不要全局設置magin和padding
/*別這樣寫*/
* {
margin: 0;
padding: 0;
}
沒有必要將所有元素的margin、padding值都置為0。
17. 鏈接的樣式，要按照這個順序來書寫 
a:link -> a:visited -> a:hover -> a:active



本文版權歸傳智播客UI培訓學院所有，歡迎轉載，轉載請注明作者出處。謝謝！
作者：傳智播客UI培訓學院
首發(fā)：http://xamj520.com/ui 
0 分享到：
和我們在線交談！