清華大佬耗費三個月吐血整理的幾百G的資源，免費分享！....>>>

選擇器、屬性和值都使用小寫

在xhtml標準中規定了所有標簽、屬性和值都小寫，CSS也是如此。

單行寫完一個選擇器定義

便于選擇器的尋找和閱讀，也便于插入新選擇器和編輯，便于模塊等的識別。去除多余空格，使代碼緊湊減少換行。

如果有嵌套定義，可以采取內部單行的形式。

/* 單行定義一個選擇器 */ 
.m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;} 
/* 這是一個有嵌套定義的選擇器 */ 
@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;} 
} 

最后一個值也以分號結尾

通常在大括號結束前的值可以省略分號，但是這樣做會對修改、添加和維護工作帶來不必要的失誤和麻煩。

省略值為0時的單位

為節省不必要的字節同時也使閱讀方便，我們將0px、0em、0%等值縮寫為0。

.m-box{margin:0 10px;background-position:50% 0;} 

使用單引號

省略url引用中的引號，其他需要引號的地方使用單引號。

.m-box{background:url(bg.png);} 
.m-box:after{content:'.';} 

使用16進制表示顏色值

除非你需要透明度而使用rgba，否則都使用#f0f0f0這樣的表示方法，并盡量縮寫。

.m-box{color:#f00;background:rgba(0,0,0,0.5);} 

根據屬性的重要性按順序書寫

只遵循橫向順序即可，先顯示定位布局類屬性，后盒模型等自身屬性，最后是文本類及修飾類屬性。

→	顯示屬性	自身屬性	文本屬性和其他修飾
	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

.m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;} 

如果屬性間存在關聯性，則不要隔開寫。

/* 這里的height和line-height有關聯性 */ 
.m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;} 

私有在前，標準在后

先寫帶有瀏覽器私有標志的，后寫W3C標準的。

.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;} 

注釋格式：/* 注釋文字 */

對選擇器的注釋統一寫在被注釋對象的上一行，對屬性及值的注釋寫于分號后。

注釋內容兩端需空格，已確保即使在編碼錯誤的情況下也可以正確解析樣式。

在必要的情況下，可以使用塊狀注釋，塊狀注釋保持統一的縮進對齊。

原則上每個系列的樣式都需要有一個注釋，言簡意賅的表明名稱、用途、注意事項等。

/* 塊狀注釋文字 
 * 塊狀注釋文字 
 * 塊狀注釋文字 
 */ 
.m-list{width:500px;} 
.m-list li{height:20px;line-height:20px;/* 這里是對line-height的一個注釋 */overflow:hidden;} 
.m-list li a{color:#333;} 
/* 單行注釋文字 */ 
.m-list li em{color:#666;} 

原則上不允許使用Hack

很多不兼容問題可以通過改變方法和思路來解決，并非一定需要Hack，根據經驗你完全可以繞過某些兼容問題。

一種合理的結構和合理的樣式，是極少會碰到兼容問題的。

由于瀏覽器自身缺陷，我們無法避開的時候，可以允許使用適當的Hack。

統一Hack方法

統一使用“*”和“_”分別對IE7和6進行Hack。如下代碼所示：

/* IE7會顯示灰色#888，IE6會顯示白色#fff，其他瀏覽器顯示黑色#000 */ 
.m-list{color:#000;*color:#888;_color:#fff;} 

建議并適當縮寫值

“建議并適當”是因為縮寫總是會包含一系列的值，而有時候我們并不希望設置某一值，反而造成了麻煩，那么這時候你可以不縮寫，而是分開寫。

當然，在一切可以縮寫的情況下，請務必縮寫，它最大的好處就是節省了字節，便于維護，并使閱讀更加一目了然。

縮寫方法請查閱css手冊。

選擇器順序

請綜合考慮以下順序依據：

• 從大到?。ㄒ赃x擇器的范圍為準）
• 從低到高（以等級上的高低為準）
• 從先到后（以結構上的先后為準）
• 從父到子（以結構上的嵌套為準）

以下僅為簡單示范：

/* 從大到小 */ 
.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 = 類、偽類和屬性選擇器的數量。

d = 類型選擇器和偽元素選擇器的數量。

選擇器	等級(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