首頁
1、Reset
真的，要一直使用一個reset，無論是使用Eric Meyer Reset、YUI Reset、或者你自己的定制的reset，一定要使用。
這可以簡單到僅僅將所有元素中的margin和padding屬性去掉：
程序代碼 程序代碼
Eric Meyer和YUI的Resets樣式是很棒的，但對我來說，它們走的太遠了。我想要你清除所有東西，然後再重新定義元素的許多屬性。這就是Eric Meyer所推薦的。如果有更有效的方法是用它的話，你不應該只是拿來他的樣式文件，將它直接放到自己的項目中——提煉它，在它的基礎上重建，把它變成你自己的。
哦，請不要再這樣：
程序代碼 程序代碼
它被使用的地方太多了，如果把一個單選框的padding去掉，你覺得會發生什麼事情？ 表單元素有的時候會有些比較時髦的表現，所以最好還是讓它們保持原狀吧。
2、按字母排序
一個小測試，下面的兩個例子，你認為哪個能較快找到margin-right屬性的位置？
例1：
不要告訴我例2沒有例1快！通過將這些樣式的屬性按照字母排序，你所創建的連貫性將幫你減少花費在尋找某個屬性的時間。
有的人以這種方法組織排序，其他人又用另外的方法來組織樣式的順序。但是在一些公司，我們一致下定決心按照字母來排序。當你和其他人共同開發代碼的時候，這種方法肯定對你有用。每次看到某個樣式表沒有按照字母排序，就很討厭，因為它們看起來比較凌亂無序……
3、有組織的
你應該組織你的樣式，這樣你就可以比較容易的找到想要的內容以及放在一起的相關條目。這可以使用註釋的方法。例如，這樣組織樣式表的：
程序代碼 程序代碼
4、一致性
無論你現在以何種方式編碼，保持下去。十分討厭關於完全單行或者完全多行的爭議，這本身是沒有什麼可爭議的！每個人都有自己的看法，所以就用你認為對的並自始至終保持下去。
就個人而言，使用混合模式，如果一個樣式有超過3條屬性，就採用多行：
程序代碼 程序代碼
使用這種方法是因為文本編輯器一行在換行前正好能容納大概3個屬性，如果沒有太多的屬性，顯然單行要比多行更易讀。
5、從正確的地方開始
在你寫好你的標籤之前不要動你的樣式文件
當準備開工的時候，在創建一個CSS文件之前，檢查並對整個文檔進行編碼(HTML)，從開始body標籤到結束整個body標籤。不添加任何多餘的div、id或class。會添加一些通用的div，比如頭部，內容，底部，因為我知道這些東西肯定會有。
通過先編碼整個文檔，你可以避免出現多DIV症或多類症，這些毛病有的時候可能是致命的！ 你只需要在你開始寫CSS和確定需要另外的東西來實現相關效果的時候再加入它們。
使用CSS的向後選擇器來定義子元素。不要直接自動的為元素添加類或id。請記住，如果一個文檔沒有良好的格式(結構)，CSS是毫無價值的。
*編輯注：不能足夠的強調這一點。就像Trevor 說的，在沒有100%完成HTML之前，不要動你的CSS文件。
結論
這只是一些寫出更好的代碼的一些技巧。當然這絕不是此文的結束，當發現了其它技巧時，就會繼續分享的。
真的，要一直使用一個reset，無論是使用Eric Meyer Reset、YUI Reset、或者你自己的定制的reset，一定要使用。
這可以簡單到僅僅將所有元素中的margin和padding屬性去掉：
程序代碼 程序代碼
- 代碼:
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和YUI的Resets樣式是很棒的，但對我來說，它們走的太遠了。我想要你清除所有東西，然後再重新定義元素的許多屬性。這就是Eric Meyer所推薦的。如果有更有效的方法是用它的話，你不應該只是拿來他的樣式文件，將它直接放到自己的項目中——提煉它，在它的基礎上重建，把它變成你自己的。
哦，請不要再這樣：
程序代碼 程序代碼
- 代碼:
* { margin: 0; padding: 0; }
它被使用的地方太多了，如果把一個單選框的padding去掉，你覺得會發生什麼事情？ 表單元素有的時候會有些比較時髦的表現，所以最好還是讓它們保持原狀吧。
2、按字母排序
一個小測試，下面的兩個例子，你認為哪個能較快找到margin-right屬性的位置？
例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;
}
例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;
}
不要告訴我例2沒有例1快！通過將這些樣式的屬性按照字母排序，你所創建的連貫性將幫你減少花費在尋找某個屬性的時間。
有的人以這種方法組織排序，其他人又用另外的方法來組織樣式的順序。但是在一些公司，我們一致下定決心按照字母來排序。當你和其他人共同開發代碼的時候，這種方法肯定對你有用。每次看到某個樣式表沒有按照字母排序，就很討厭，因為它們看起來比較凌亂無序……
3、有組織的
你應該組織你的樣式，這樣你就可以比較容易的找到想要的內容以及放在一起的相關條目。這可以使用註釋的方法。例如，這樣組織樣式表的：
程序代碼 程序代碼
- 代碼:
/*****Reset*****/
Reset
/*****Basic Elements*****/
為基本元素定義樣式：body, h1-h6, ul, ol, a, p, etc.
/*****Generic Classes*****/
定義一些單獨的樣式，比如，浮動、去掉元素的底部邊距等。
是的，可能他們不夠語義化，但是，它們對有效的編碼是很有效的。
/*****Basic Layout*****/
定義基本模板: 頭部、底部、等，用來定義網站的基本結構
/*****Header*****/
定義頭部的所有元素
/*****Content*****/
定義內容區域的所有元素
/*****Footer*****/
底部樣式
/*****Etc*****/
繼續定義其它樣式通過使用註釋和對相似元素進行分組，可以更快的找到你需要的內容。
4、一致性
無論你現在以何種方式編碼，保持下去。十分討厭關於完全單行或者完全多行的爭議，這本身是沒有什麼可爭議的！每個人都有自己的看法，所以就用你認為對的並自始至終保持下去。
就個人而言，使用混合模式，如果一個樣式有超過3條屬性，就採用多行：
程序代碼 程序代碼
- 代碼:
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
使用這種方法是因為文本編輯器一行在換行前正好能容納大概3個屬性，如果沒有太多的屬性，顯然單行要比多行更易讀。
5、從正確的地方開始
在你寫好你的標籤之前不要動你的樣式文件
當準備開工的時候，在創建一個CSS文件之前，檢查並對整個文檔進行編碼(HTML)，從開始body標籤到結束整個body標籤。不添加任何多餘的div、id或class。會添加一些通用的div，比如頭部，內容，底部，因為我知道這些東西肯定會有。
通過先編碼整個文檔，你可以避免出現多DIV症或多類症，這些毛病有的時候可能是致命的！ 你只需要在你開始寫CSS和確定需要另外的東西來實現相關效果的時候再加入它們。
使用CSS的向後選擇器來定義子元素。不要直接自動的為元素添加類或id。請記住，如果一個文檔沒有良好的格式(結構)，CSS是毫無價值的。
*編輯注：不能足夠的強調這一點。就像Trevor 說的，在沒有100%完成HTML之前，不要動你的CSS文件。
結論
這只是一些寫出更好的代碼的一些技巧。當然這絕不是此文的結束，當發現了其它技巧時，就會繼續分享的。