5種方法馬上寫出更好的CSS代碼

原文連接：http://article.yeeyan.org/view/toydime/30047?from_com

固然，每一個人均可以編寫CSS代碼，甚至你如今已經讓它爲你的項目工做了。可是CSS還能夠更好嗎？開始用這5個Tips改進你的CSS吧！

1.重置

首先，很認真的告訴你，老是要重置某些分類。不管你是使用 Eric Meyer Reset、YUI Reset

或者你本身編寫的重置代碼，只要使用就對了。

它能很簡單的移除全部元素的填充（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都是很是強大的，可是對於我而言，它們走的太遠了。我以爲你最終須要重置一切，而後從新定義全部元素的屬性。這就是爲何Eric Meyer推薦更有效的使用（重置樣式表），而你不要只是使用他的重置樣式表，將它拖放到你的項目中。調整它（的重置樣式表），創建屬於本身的重置樣式表。

噢，請中止使用：

   * { margin: 0; padding: 0; } 

花更多的時間去製做它，當你移除了填充（padding）你認爲單選按鈕會發生什麼變化？表單元素有時可以作些時髦的事情，因此最有效的方式就是將他們獨立。

2.排序

一個小的測試

這個例子就是要讓你思考如何更快的找到右邊距屬性？

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不能更快的找到右邊距屬性。根據字母排序你的元素屬性。一致的建立你的CSS，將幫助你節省花費在尋找一個特殊屬性的時間。

我知道一些人用這樣的方法去組織代碼，其餘人又用另外一種方法去組織，可是在個人公司，咱們協商一致作出決定，全部的代碼都將按照字母排序來組織。經過這樣組織代碼與其餘人協同工做必定是有幫助的。當我碰到屬性沒有按照字母排序的層疊樣式表我每一次都會退縮。

3.組織

你應該組織你的樣式表以至相關的內容靠在一塊兒，更簡單的找到想要的。使用更有效的註解。舉個例子，這是我如何構造個人層疊樣式表：

/*****Reset*****/
移除元素的填充（padding）和邊距（margin）。

/*****Basic Elements*****/
定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等.

/*****Generic Classes*****/
定義簡單的風格，好像浮動的某一側, 移除元素的下邊距, 等
固然，它們大部分都與咱們但願的語義不相關,可是它們是高效處理代碼所必須的。

/*****Basic Layout*****/
定義基本的模板: header, footer等. 幫助定義網頁佈局的基本元素

/*****Header*****/
定義全部Hearder元素

/*****Content*****/
定義全部內容框內的元素

/*****Footer*****/
定義全部Footer的元素
/*****Etc*****/
定義其餘的選擇器。

經過註解和歸類類似元素的分組，將更快的找到你想要的。

4.一致性

不管你決定使用什麼方式去編寫代碼，保持一致。我已經對所有放在1行VS多行的CSS編寫編寫方式的爭論感到乏味和疲倦。這是不須要爭辯的。每一個人都有本身的觀點，因此選擇一種你喜歡的工做方式，並在全部的樣式表中保持一致。

就我我的而言，我將使用二者結合的方式。若是一個選擇器超過了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; }  

因此找到你喜歡的工做方式而後保持一致。

 

5.從正確的地方開始

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

當我準備分割一張網頁的時候，建立CSS文件以前，我須要預覽而且標記body開標籤到body的閉合標籤之間的全部文檔。我不會增長額外的DIV ,ID,或者類選擇器。我將會添加一些通常的DIV，就好像hearder、content、footer.由於我知道這些東西是現實存在的。

經過先標記文檔，你將不會碰到本已註定的divities¹和classitis²麻煩!/*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子選擇器指定子元素；不要只是機械的給元素添加類或者ID選擇器。記住：沒有一個良好的格式化文檔（或者標記結構）CSS是無價值的。

總結

這些Tips可以幫助我更好的完成CSS代碼的編寫。可是這並不意味着這張列表的結束，接下來我將會去帶來一些其餘的與你們分享。

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