在xhtml標準中規定了所有標簽、屬性和值都小寫(xiě)，CSS也是如此。
便于選擇器的尋找和閱讀，也便于插入新選擇器和編輯，便于模塊等的識別。去除多余空格，使代碼緊湊減少換行。
如果有嵌套定義，可以采取內部單行的形式。
1 2 3 4 5 6 7 8 9 10 11 | /* 單行定義一個(gè)選擇器 */.m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;}/* 這是一個(gè)有嵌套定義的選擇器 */@media all and (max-width:600px){ .m-class1 .itm{height:17px;line-height:17px;font-size:12px;} .m-class2 .itm{width:100px;overflow:hidden;}}@-webkit-keyframes showitm{ 0%{height:0;opacity:0;} 100%{height:100px;opacity:1;}} |
通常在大括號結束前的值可以省略分號，但是這樣做會(huì )對修改、添加和維護工作帶來(lái)不必要的失誤和麻煩。
為節省不必要的字節同時(shí)也使閱讀方便，我們將0px、0em、0%等值縮寫(xiě)為0。
1 | .m-box{margin:0 10px;background-position:50% 0;} |
省略url引用中的引號，其他需要引號的地方使用單引號。
1 2 | .m-box{background:url(bg.png);}.m-box:after{content:'.';} |
除非你需要透明度而使用rgba，否則都使用#f0f0f0這樣的表示方法，并盡量縮寫(xiě)。
1 | .m-box{color:#f00;background:rgba(0,0,0,0.5);} |
只遵循橫向順序即可，先顯示定位布局類(lèi)屬性，后盒模型等自身屬性，最后是文本類(lèi)及修飾類(lèi)屬性。
| → | 顯示屬性 | 自身屬性 | 文本屬性和其他修飾 |
|---|---|---|---|
| display | width | font | |
| visibility | height | text-align | |
| position | margin | text-decoration | |
| float | padding | vertical-align | |
| clear | border | white-space | |
| list-style | overflow | color | |
| top | min-width | background |
1 | .m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;} |
如果屬性間存在關(guān)聯(lián)性，則不要隔開(kāi)寫(xiě)。
1 2 | /* 這里的height和line-height有關(guān)聯(lián)性 */.m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;} |
先寫(xiě)帶有瀏覽器私有標志的，后寫(xiě)W3C標準的。
1 | .m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;} |
對選擇器的注釋統一寫(xiě)在被注釋對象的上一行，對屬性及值的注釋寫(xiě)于分號后。
注釋內容兩端需空格，已確保即使在編碼錯誤的情況下也可以正確解析樣式。
在必要的情況下，可以使用塊狀注釋?zhuān)瑝K狀注釋保持統一的縮進(jìn)對齊。
原則上每個(gè)系列的樣式都需要有一個(gè)注釋?zhuān)院?jiǎn)意賅的表明名稱(chēng)、用途、注意事項等。
1 2 3 4 5 6 7 8 9 | /* 塊狀注釋文字 * 塊狀注釋文字 * 塊狀注釋文字 */.m-list{width:500px;}.m-list li{height:20px;line-height:20px;/* 這里是對line-height的一個(gè)注釋 */overflow:hidden;}.m-list li a{color:#333;}/* 單行注釋文字 */.m-list li em{color:#666;} |
很多不兼容問(wèn)題可以通過(guò)改變方法和思路來(lái)解決，并非一定需要Hack，根據經(jīng)驗你完全可以繞過(guò)某些兼容問(wèn)題。
一種合理的結構和合理的樣式，是極少會(huì )碰到兼容問(wèn)題的。
由于瀏覽器自身缺陷，我們無(wú)法避開(kāi)的時(shí)候，可以允許使用適當的Hack。
統一使用“*”和“_”分別對IE7和6進(jìn)行Hack。如下代碼所示：
1 2 | /* IE7會(huì )顯示灰色#888，IE6會(huì )顯示白色#fff，其他瀏覽器顯示黑色#000 */.m-list{color:#000;*color:#888;_color:#fff;} |
“建議并適當”是因為縮寫(xiě)總是會(huì )包含一系列的值，而有時(shí)候我們并不希望設置某一值，反而造成了麻煩，那么這時(shí)候你可以不縮寫(xiě)，而是分開(kāi)寫(xiě)。
當然，在一切可以縮寫(xiě)的情況下，請務(wù)必縮寫(xiě)，它最大的好處就是節省了字節，便于維護，并使閱讀更加一目了然。
縮寫(xiě)方法請查閱css手冊。
請綜合考慮以下順序依據：
以下僅為簡(jiǎn)單示范：
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* 從大到小 */.m-list p{margin:0;padding:0;}.m-list p.part{margin:1px;padding:1px;}/* 從低到高 */.m-logo a{color:#f00;}.m-logo a:hover{color:#fff;}/* 從先到后 */.g-hd{height:60px;}.g-bd{height:60px;}.g-ft{height:60px;}/* 從父到子 */.m-list{width:300px;}.m-list .itm{float:left;} |
a = 行內樣式style。
b = ID選擇器的數量。
c = 類(lèi)、偽類(lèi)和屬性選擇器的數量。
d = 類(lèi)型選擇器和偽元素選擇器的數量。
| 選擇器 | 等級(a,b,c,d) |
|---|---|
| style=”” | 1,0,0,0 |
| #wrapper #content {} | 0,2,0,0 |
| #content .dateposted {} | 0,1,1,0 |
| div#content {} | 0,1,0,1 |
| #content p {} | 0,1,0,1 |
| #content {} | 0,1,0,0 |
| p.comment .dateposted {} | 0,0,2,1 |
| div.comment p {} | 0,0,1,2 |
| .comment p {} | 0,0,1,1 |
| p.comment {} | 0,0,1,1 |
| .comment {} | 0,0,1,0 |
| div p {} | 0,0,0,2 |
| p {} | 0,0,0,1 |
聯(lián)系客服
