當然，每個(gè)人都可以編寫CSS代碼，甚至你現在已經讓它為(wèi)你的項目工(gōng)作了。但是CSS還(hái)可以更好嗎(ma)？開(kāi)始用這5個(gè)Tips改進你的CSS吧(ba)！

1.重置

首先，很認真的告訴你，總是要重置某些分類。無論你是使用 、或者你自(zì)己編寫的重置代碼，隻要使用就(jiù)對了。

它能(néng)很簡單的移除所有元素的填充（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都是非常強大的，但是對于我而言，它們走的太遠(yuǎn)了。我覺得你最終需要重置一(yī)切，然後重新定義所有元素的屬性。這就(jiù)是為(wèi)什麽Eric Meyer推薦更有效的使用（重置樣式表），而你不要隻是使用他的重置樣式表，将它拖放(fàng)到(dào)你的項目中。調整它（的重置樣式表），建立屬于自(zì)己的重置樣式 表。

噢，請停止使用：

* { margin: 0; padding: 0; }

花更多(duō)的時間去制作它，當你移除了填充（padding）你認為(wèi)單選按鈕會(huì)發生(shēng)什麽變化？表單元素有時能(néng)夠做些時髦的事(shì)情，所以最有效的方式就(jiù)是将他們獨立。

2.排序

一(yī)個(gè)小(xiǎo)的測試
這個(gè)例子就(jiù)是要讓你思考如何更快的找到(dào)右邊距屬性？

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;
}


你不能(néng)告訴我Example#2不能(néng)更快的找到(dào)右邊距屬性。根據字母排序你的元素屬性。一(yī)緻的創建你的CSS，将幫助你節省花費(fèi)在尋找一(yī)個(gè)特殊屬性的時間。

我知道一(yī)些人用這樣的方法去組織代碼，其他人又(yòu)用另一(yī)種方法去組織，但是在我的公司，我們協商一(yī)緻做出決定，所有的代碼都将按照(zhào)字母排序來組織。通(tōng)過這樣組織代碼與其他人協同工(gōng)作一(yī)定是有幫助的。當我碰到(dào)屬性沒有按照(zhào)字母排序的層疊樣式表我每一(yī)次都會(huì)退縮。

3.組織

你應該組織你的樣式表以緻相(xiàng)關的内容靠在一(yī)起，更簡單的找到(dào)想要的。使用更有效的注解。舉個(gè)例子，這是我如何構造我的層疊樣式表：

/*****Reset*****/
移除元素的填充（padding）和邊距（margin）。
/*****Basic Elements*****/
定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等.
/*****Generic Classes*****/
定義簡單的風格，好像浮動的某一(yī)側, 移除元素的下(xià)邊距, 等當然，它們大部分都與我們希望的語義不相(xiàng)關,但是它們是高(gāo)效處理代碼所必須的。
/*****Basic Layout*****/
定義基本的模闆: header, footer等. 幫助定義網頁布局的基本元素
/*****Header*****/
定義所有Hearder元素
/*****Content*****/
定義所有内容框内的元素
/*****Footer*****/
定義所有Footer的元素
/*****Etc*****/
定義其他的選擇器(qì)。通(tōng)過注解和歸類相(xiàng)似元素的分組，将更快的找到(dào)你想要的。

4.一(yī)緻性

無論你決定使用什麽方式去編寫代碼，保持一(yī)緻。我已經對全部放(fàng)在1行VS多(duō)行的CSS編寫編寫方式的争論感到(dào)乏味和疲倦。這是不需要争辯的。每個(gè)人都有自(zì)己的觀點，所以選擇一(yī)種你喜歡的工(gōng)作方式，并在所有的樣式表中保持一(yī)緻。

就(jiù)我個(gè)人而言，我将使用兩者結合的方式。如果一(yī)個(gè)選擇器(qì)超過了3個(gè)屬性，我将截斷它采用多(duō)行的方式編寫。


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; }


所以找到(dào)你喜歡的工(gōng)作方式然後保持一(yī)緻。

5.從(cóng)正确的地方開(kāi)始

在完成标記語言之前不要去嘗試靠近你的樣式表。

當我準備分割一(yī)張網頁的時候，創建CSS文件(jiàn)之前，我需要預覽并且标記body開(kāi)标簽到(dào)body的閉合标簽之間的所有文檔。我不會(huì)增加額外的DIV ,ID,或者類選擇器(qì)。我将會(huì)添加一(yī)些一(yī)般的DIV，就(jiù)好像hearder、content、footer.因為(wèi)我知道這些東西(xī)是現實存在的。

通(tōng)過先标記文檔，你将不會(huì)碰到(dào)本已注定的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子選擇器(qì)指定子元素；不要隻是機(jī)械的給元素添加類或者ID選擇器(qì)。記住：沒有一(yī)個(gè)良好的格式化文檔（或者标記結構）CSS是無價值的。

總結

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

你有什麽更好的Tips幫助我們完善CSS代碼？