每個人都可以編寫CSS代碼，甚至你現(xiàn)在已經(jīng)讓它為你的項目工作了。但是CSS還可以更好嗎？雖然有多種這方面的技巧，得開始用這五個方面改進你的CSS，會讓你顯得更加專業(yè)，也能使代碼有好！
一、重置
首先，很認(rèn)真的告訴你，總是要重置某些分類。無論你是使用 Eric Meyer Reset、YUI Reset，或者你自己編寫的重置代碼，只要使用就對了。
它能很簡單的移除所有元素的填充（padding）和邊距（margin）：
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
Eric Meyer Reset和YUI Reset都是非常強大的，但是對于我而言，它們走的太遠了。我覺得你最終需要重置一切，然后重新定義所有元素的屬性。這就是為什么Eric Meyer推薦更有效的使用（重置樣式表），而你不要只是使用他的重置樣式表，將它拖放到你的項目中。調(diào)整它（的重置樣式表），建立屬于自己的重置樣式表。
噢，請停止使用：
* { margin: 0; padding: 0; }
花更多的時間去制作它，當(dāng)你移除了填充（padding）你認(rèn)為單選按鈕會發(fā)生什么變化？表單元素有時能夠做些時髦的事情，所以最有效的方式就是將他們獨立。
二、排序
一個小的測試：這個例子就是要讓你思考如何更快的找到右邊距屬性？
Example#1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
Example#2
div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101;}
你不能告訴我Example#2不能更快的找到右邊距屬性。根據(jù)字母排序你的元素屬性。一致的創(chuàng)建你的CSS，將幫助你節(jié)省花費在尋找一個特殊屬性的時間。
我知道一些人用這樣的方法去組織代碼，其他人又用另一種方法去組織，但是在我的公司，我們協(xié)商一致做出決定，所有的代碼都將按照字母排序來組織。通過這樣組織代碼與其他人協(xié)同工作一定是有幫助的。當(dāng)我碰到屬性沒有按照字母排序的層疊樣式表我每一次都會退縮。
三、組織
你應(yīng)該組織你的樣式表以致相關(guān)的內(nèi)容靠在一起，更簡單的找到想要的。使用更有效的注解。舉個例子，這是我如何構(gòu)造我的層疊樣式表：
/*****Reset*****/移除元素的填充（padding）和邊距（margin）。
/*****Basic Elements*****/定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等.
/*****Generic Classes*****/定義簡單的風(fēng)格，好像浮動的某一側(cè), 移除元素的下邊距, 等當(dāng)然，它們大部分都與我們希望的語義不相關(guān),但是它們是高效處理代碼所必須的。
/*****Basic Layout*****/定義基本的模板: header, footer等. 幫助定義網(wǎng)頁布局的基本元素
/*****Header*****/定義所有Hearder元素
/*****Content*****/定義所有內(nèi)容框內(nèi)的元素
/*****Footer*****/定義所有Footer的元素
/*****Etc*****/定義其他的選擇器。通過注解和歸類相似元素的分組，將更快的找到你想要的。
四、一致性
無論你決定使用什么方式去編寫代碼，保持一致。我已經(jīng)對全部放在1行VS多行的CSS編寫編寫方式的爭論感到乏味和疲倦。這是不需要爭辯的。每個人都有自己的觀點，所以選擇一種你喜歡的工作方式，并在所有的樣式表中保持一致。
就我個人而言，我將使用兩者結(jié)合的方式。如果一個選擇器超過了3個屬性，我將截斷它采用多行的方式編寫。
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; } |
