1.重置

首先，很認(rèn)真的告訴你，總是要重置某些分類。無(wú)論你是使用?Eric Meyer Reset、YUI Reset或者你自己編寫(xiě)的重置代碼，只要使用就對(duì)了。 它能很簡(jiǎn)單的移除所有元素的填充（padding）和邊距（margin）：

1. html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
2. pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Eric Meyer Reset和YUI Reset都是非常強(qiáng)大的，但是對(duì)于我而言，它們走的太遠(yuǎn)了。我覺(jué)得你最終需要重置一切，然后重新定義所有元素的屬性。這就是為什么Eric Meyer推薦更有效的使用（重置樣式表），而你不要只是使用他的重置樣式表，將它拖放到你的項(xiàng)目中。調(diào)整它（的重置樣式表），建立屬于自己的重置樣式 表。 噢，請(qǐng)停止使用： * { margin: 0; padding: 0; } 花更多的時(shí)間去制作它，當(dāng)你移除了填充（padding）你認(rèn)為單選按鈕會(huì)發(fā)生什么變化？表單元素有時(shí)能夠做些時(shí)髦的事情，所以最有效的方式就是將他們獨(dú)立。

2.排序

一個(gè)小的測(cè)試 這個(gè)例子就是要讓你思考如何更快的找到右邊距屬性？ 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é)省花費(fèi)在尋找一個(gè)特殊屬性的時(shí)間。 我知道一些人用這樣的方法去組織代碼，其他人又用另一種方法去組織，但是在我的公司，我們協(xié)商一致做出決定，所有的代碼都將按照字母排序來(lái)組織。通過(guò)這樣組織代碼與其他人協(xié)同工作一定是有幫助的。當(dāng)我碰到屬性沒(méi)有按照字母排序的層疊樣式表我每一次都會(huì)退縮。

3.組織

你應(yīng)該組織你的樣式表以致相關(guān)的內(nèi)容靠在一起，更簡(jiǎn)單的找到想要的。使用更有效的注解。舉個(gè)例子，這是我如何構(gòu)造我的層疊樣式表： /*****Reset*****/ 移除元素的填充（padding）和邊距（margin）。 /*****Basic Elements*****/ 定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等. /*****Generic Classes*****/ 定義簡(jiǎn)單的風(fēng)格，好像浮動(dòng)的某一側(cè), 移除元素的下邊距, 等當(dāng)然，它們大部分都與我們希望的語(yǔ)義不相關(guān),但是它們是高效處理代碼所必須的。 /*****Basic Layout*****/ 定義基本的模板: header, footer等. 幫助定義網(wǎng)頁(yè)布局的基本元素 /*****Header*****/ 定義所有Hearder元素 /*****Content*****/ 定義所有內(nèi)容框內(nèi)的元素 /*****Footer*****/ 定義所有Footer的元素 /*****Etc*****/ 定義其他的選擇器。通過(guò)注解和歸類相似元素的分組，將更快的找到你想要的。

4.一致性

無(wú)論你決定使用什么方式去編寫(xiě)代碼，保持一致。我已經(jīng)對(duì)全部放在1行VS多行的CSS編寫(xiě)編寫(xiě)方式的爭(zhēng)論感到乏味和疲倦。這是不需要爭(zhēng)辯的。每個(gè)人都有自己的觀點(diǎn)，所以選擇一種你喜歡的工作方式，并在所有的樣式表中保持一致。 就我個(gè)人而言，我將使用兩者結(jié)合的方式。如果一個(gè)選擇器超過(guò)了3個(gè)屬性，我將截?cái)嗨捎枚嘈械姆绞骄帉?xiě)。 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; } 所以找到你喜歡的工作方式然后保持一致。

5.從正確的地方開(kāi)始

在完成標(biāo)記語(yǔ)言之前不要去嘗試靠近你的樣式表。 當(dāng)我準(zhǔn)備分割一張網(wǎng)頁(yè)的時(shí)候，創(chuàng)建CSS文件之前，我需要預(yù)覽并且標(biāo)記body開(kāi)標(biāo)簽到body的閉合標(biāo)簽之間的所有文檔。我不會(huì)增加額外的DIV ,ID,或者類選擇器。我將會(huì)添加一些一般的DIV，就好像hearder、content、footer.因?yàn)槲抑肋@些東西是現(xiàn)實(shí)存在的。 通過(guò)先標(biāo)記文檔，你將不會(huì)碰到本已注定的divities1和classitis2麻煩!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未譯）。 利用CSS子選擇器指定子元素；不要只是機(jī)械的給元素添加類或者ID選擇器。記住：沒(méi)有一個(gè)良好的格式化文檔（或者標(biāo)記結(jié)構(gòu)）CSS是無(wú)價(jià)值的。

總結(jié)

這些Tips能夠幫助我更好的完成CSS代碼的編寫(xiě)。但是這并不意味著這張列表的結(jié)束，接下來(lái)我將會(huì)去帶來(lái)一些其他的與大家分享。