編寫完美CSS代碼的五個關鍵
本文和大家重點討論一下寫出***CSS代碼的5個重要方面，相信學習了這些CSS編碼與CSS技巧，你就會輕松寫出***的CSS代碼。
寫出***CSS代碼的5個重要方面
每個人都可以編寫CSS代碼，甚至你現在已經讓它為你的項目工作了。我們在52CSS.com中也一直與大家討論，學習CSS編碼與CSS技巧。但是CSS還可以更好嗎？開始用這5個Tips改進你的CSS吧！
一、關于CSS重置
首先，很認真的告訴你，總是要重置某些分類。無論你是使用EricMeyerReset、YUIReset或者你自己編寫的重置代碼，只要使用就對了。
它能很簡單的移除所有元素的填充（padding）和邊距（margin）：
ExampleSourceCode
- 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;}
EricMeyerReset和YUIReset都是非常強大的，但是對于我而言，它們走的太遠了。我覺得你最終需要重置一切，然后重新定義所有元素的屬性。這就是為什么EricMeyer推薦更有效的使用（重置樣式表），而你不要只是使用他的重置樣式表，將它拖放到你的項目中。調整它（的重置樣式表），建立屬于自己的重置樣式表。
請停止使用：
ExampleSourceCode
- *{margin:0;padding:0;}
花更多的時間去制作它，當你移除了填充（padding）你認為單選按鈕會發生什么變化？表單元素有時能夠做些時髦的事情，所以最有效的方式就是將他們獨立。
二、CSS屬性的排序
一個小的測試，這個例子就是要讓你思考如何更快的找到右邊距屬性？
ExampleSourceCode
- Example#1
- div#headerh1{
- z-index:101;
- color:#000;
- position:relative;
- line-height:24px;
- margin-right:48px;
- border-bottom:1pxsolid#dedede;
- font-size:18px;
- }
- Example#2
- div#headerh1{
- border-bottom:1pxsolid#dedede;
- color:#000;
- font-size:18px;
- line-height:24px;
- margin-right:48px;
- position:relative;
- z-index:101;
- }
你不能告訴我Example#2不能更快的找到右邊距屬性。根據字母排序你的元素屬性。一致的創建你的CSS，將幫助你節省花費在尋找一個特殊屬性的時間。
我知道一些人用這樣的方法去組織代碼，其他人又用另一種方法去組織，但是在我的公司，我們協商一致做出決定，所有的代碼都將按照字母排序來組織。通過這樣組織代碼與其他人協同工作一定是有幫助的。當我碰到屬性沒有按照字母排序的層疊樣式表我每一次都會退縮。#p#
三、CSS樣式的組織
你應該組織你的樣式表以致相關的內容靠在一起，更簡單的找到想要的。使用更有效的注解。舉個例子，這是我如何構造我的層疊樣式表：
ExampleSourceCode
- /*****Reset*****/
- 移除元素的填充（padding）和邊距（margin）。
- /*****BasicElements*****/
- 定義基本元素的樣式:body,h1-h6,ul,ol,a,p,等.
- /*****GenericClasses*****/
- 定義簡單的風格，好像浮動的某一側,移除元素的下邊距,等當然，
- 它們大部分都與我們希望的語義不相關,但是它們是高效處理代碼所必須的。
- /*****BasicLayout*****/
- 定義基本的模板:header,footer等.幫助定義網頁布局的基本元素
- /*****Header*****/
- 定義所有Hearder元素
- /*****Content*****/
- 定義所有內容框內的元素
- /*****Footer*****/
- 定義所有Footer的元素
- /*****Etc*****/
定義其他的選擇器。通過注解和歸類相似元素的分組，將更快的找到你想要的。
四、保持一致性
無論你決定使用什么方式去編寫代碼，保持一致。我已經對全部放在1行VS多行的CSS編寫編寫方式的爭論感到乏味和疲倦。這是不需要爭辯的。每個人都有自己的觀點，所以選擇一種你喜歡的工作方式，并在所有的樣式表中保持一致。
就我個人而言，我將使用兩者結合的方式。如果一個選擇器超過了3個屬性，我將截斷它采用多行的方式編寫。
ExampleSourceCode
- div#header{float:left;width:100%;}
- div#headerdiv.column{
- border-right:1pxsolid#ccc;
- float:rightright;
- margin-right:50px;
- padding:10px;
- width:300px;
- }
- div#headerh1{float:left;position:relative;width:250px;}
所以找到你喜歡的工作方式然后保持一致。
五、從正確的地方開始
在完成標記語言之前不要去嘗試靠近你的樣式表。
當我準備分割一張網頁的時候，創建CSS文件之前，我需要預覽并且標記body開標簽到body的閉合標簽之間的所有文檔。我不會增加額外的DIV,ID,或者類選擇器。我將會添加一些一般的DIV，就好像hearder、content、footer.因為我知道這些東西是現實存在的。
通過先標記文檔，你將不會碰到本已注定的divities1和classitis2麻煩!/*YouonlyneedtoaddinthatstuffonceyouhavebeguntowritetheCSSandrealizethatyouaregoingtoneedanotherhooktoaccomplishwhatyouaretryingtoachieve.*/(原文未譯）。
利用CSS子選擇器指定子元素；不要只是機械的給元素添加類或者ID選擇器。記住：沒有一個良好的格式化文檔（或者標記結構）CSS是無價值的。
【編輯推薦】
