快速寫出較好CSS的5種方法

1. Reset

Photo by redux

真的，要一直使用一個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. 按字母排序

Photo by kvh

一個小測試

下面的兩個例子，你認為哪個能較快找到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.有組織的

Photo by allyaubryphotography

你應該組織你的樣式，這樣你就可以比較容易的找到想要的內容以及放在一起的相關條目。這可以使用注釋的方法。例如，我是這樣組織我的樣式表的:

/*****Reset*****/Reset/*****Basic Elements*****/為基本元素定義樣式: body, h1-h6, ul, ol, a, p, etc./*****Generic Classes*****/定義一些單獨的樣式，比如，浮動、去掉元素的底部邊距等。是的，可能他們不夠語義化，但是，它們對有效編碼是很有效。/*****Basic Layout*****/定義基本模板: 頭部、底部、等，用來定義網站的基本結構/*****Header*****/定義頭部的所有元素/*****Content*****/定義內容地區的所有元素/*****Footer*****/底部樣式/*****Etc*****/繼續定義其它樣式

通過使用注釋和對相似元素進行分組，可以更快的找到你需要的內容。

4. 一致性

Photo by sailor_coruscant

無論你現在以何種方式編碼，保持下去。我十分討厭關於完全單行或者完全多行的爭議，這本身是沒有什麼可爭議的! 每個人都有自己的看法，所以就用你認為對的並自始至終保持下去。

就我個人而言，我使用混合模式，如果一個樣式有超過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.從正確的地方開始

Photo by odolphie

在你寫好你的標籤之前不要動你的樣式檔案

當我準備開工的時候，在我建立一個CSS檔案之前，我檢查並對整個文檔進行編碼(HTML)，從開始body標籤到結束整個body標籤。不添加任何多餘的div、id或class。我會添加一些通用的div，比如頭部，內容，底部，因為我知道這些東西肯定會有。

通過先編碼整個文檔，你可以避免出現多DIV症或多類症，這些毛病有的時候可能是致命的！ 你只需要在你開始寫CSS和確定需要另外的東西來實現相關效果的時候再加入它們。

使用CSS的向後選取器來定義子項目。不要直接自動的為元素添加類或id。請記住，如果一個文檔沒有良好的格式(結構)，CSS是毫無價值的。

*編輯注: 我不能足夠的強調這一點。就像Trevor 說的, 在沒有100%完成HTML之前，不要動你的CSS檔案。

結論

這隻是一些幫我寫出更好的代碼的一些技巧。當然這絕不是此文的結束，當我發現了其它技巧時，我會繼續分享的。

你有什麼關於更好的寫CSS的技巧嗎？與我們分享吧！

譯自：http://net.tutsplus.com/
原文：快速寫出較好CSS的5種方法
著作權，轉載請註明出處，謝謝！