6.23日音訊,良好的css代碼是如何做到的。我們一直在說如何去寫css，怎么才算一個成功的樣式表，可是我們就是運(yùn)用的不好，這是為什么呢？其實(shí)，每個人都可以編寫CSS代碼，甚至你現(xiàn)在已經(jīng)讓它為你的項目工作了。但是CSS還可以更好嗎？什么樣的標(biāo)準(zhǔn)才是優(yōu)秀可行的呢，下面邯鄲網(wǎng)站建設(shè)首創(chuàng)網(wǎng)絡(luò)小編就給大家一塊來說說看：

　　1.重置

　　首先，很認(rèn)真的告訴你，總是要重置某些分類。無論你是使用EricMeyerReset、YUIReset

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

　　它能很簡單的移除所有元素的填充（padding）和邊距（margin）：

　　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都是非常強(qiáng)大的，但是對于我而言，它們走的太遠(yuǎn)了。我覺得你最終需要重置一切，然后重新定義所有元素的屬性。這就是為什么EricMeyer推薦更有效的使用（重置樣式表），而你不要只是使用他的重置樣式表，將它拖放到你的項目中。調(diào)整它（的重置樣式表），建立屬于自己的重置樣式表。

　　噢，請停止使用：

　　*{margin:0;padding:0;}

　　花更多的時間去制作它，當(dāng)你移除了填充（padding）你認(rèn)為單選按鈕會發(fā)生什么變化？表單元素有時能夠做些時髦的事情，所以最有效的方式就是將他們獨(dú)立。

　　2.排序

　　一個小的測試

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

　　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不能更快的找到右邊距屬性。根據(jù)字母排序你的元素屬性。一致的創(chuàng)建你的CSS，將幫助你節(jié)省花費(fèi)在尋找一個特殊屬性的時間。

　　我知道一些人用這樣的方法去組織代碼，其他人又用另一種方法去組織，但是在我的公司，我們協(xié)商一致做出決定，所有的代碼都將按照字母排序來組織。通過這樣組織代碼與其他人協(xié)同工作一定是有幫助的。當(dāng)我碰到屬性沒有按照字母排序的層疊樣式表我每一次都會退縮。

　　3.組織

　　你應(yīng)該組織你的樣式表以致相關(guān)的內(nèi)容靠在一起，更簡單的找到想要的。使用更有效的注解。舉個例子，這是我如何構(gòu)造我的層疊樣式表：

　　/*****Reset*****/移除元素的填充（padding）和邊距（margin）。/*****BasicElements*****/定義基本元素的樣式:body,h1-h6,ul,ol,a,p,等./*****GenericClasses*****/定義簡單的風(fēng)格，好像浮動的某一側(cè),移除元素的下邊距,等當(dāng)然，它們大部分都與我們希望的語義不相關(guān),但是它們是高效處理代碼所必須的。/*****BasicLayout*****/定義基本的模板:header,footer等.幫助定義網(wǎng)頁布局的基本元素/*****Header*****/定義所有Hearder元素/*****Content*****/定義所有內(nèi)容框內(nèi)的元素/*****Footer*****/定義所有Footer的元素/*****Etc*****/定義其他的選擇器。通過注解和歸類相似元素的分組，將更快的找到你想要的。

　　4.一致性

　　無論你決定使用什么方式去編寫代碼，保持一致。我已經(jīng)對全部放在1行VS多行的CSS編寫編寫方式的爭論感到乏味和疲倦。這是不需要爭辯的。每個人都有自己的觀點(diǎn)，所以選擇一種你喜歡的工作方式，并在所有的樣式表中保持一致。

　　就我個人而言，我將使用兩者結(jié)合的方式。如果一個選擇器超過了3個屬性，我將截斷它采用多行的方式編寫。

　　div#header{float:left;width:100%;}

　　div#headerdiv.column{

　　border-right:1pxsolid#ccc;

　　float:right;

　　margin-right:50px;

　　padding:10px;

　　width:300px;

　　}

　　div#headerh1{float:left;position:relative;width:250px;}

　　所以找到你喜歡的工作方式然后保持一致。

　　5.從正確的地方開始

　　在完成標(biāo)記語言之前不要去嘗試靠近你的樣式表。

　　當(dāng)我準(zhǔn)備分割一張網(wǎng)頁的時候，創(chuàng)建CSS文件之前，我需要預(yù)覽并且標(biāo)記body開標(biāo)簽到body的閉合標(biāo)簽之間的所有文檔。我不會增加額外的DIV,ID,或者類選擇器。我將會添加一些一般的DIV，就好像hearder、content、footer.因為我知道這些東西是現(xiàn)實(shí)存在的。

　　通過先標(biāo)記文檔，你將不會碰到本已注定的divities1和classitis2麻煩!/*YouonlyneedtoaddinthatstuffonceyouhavebeguntowritetheCSSandrealizethatyouaregoingtoneedanotherhooktoaccomplishwhatyouaretryingtoachieve.*/(原文未譯）。

　　利用CSS子選擇器指定子元素；不要只是機(jī)械的給元素添加類或者ID選擇器。記?。簺]有一個良好的格式化文檔（或者標(biāo)記結(jié)構(gòu)）CSS是無價值的。

　　這些能夠幫助我更好的完成CSS代碼的編寫。但是這并不意味著這張列表的結(jié)束，接下來我將會去帶來一些其他的與大家分享。每次給大家來討論css的時候總是能得到更多朋友的反饋和留言，其實(shí)這也說明了大家對如何寫好css的渴望和期盼，既然我們有這份熱情，那么我相信從這一點(diǎn)來講我們就會有信心來做的更好。