《
5種方法立刻寫出更好的CSS代碼》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331422013.htm
所以找到你喜歡的工作方式而后保持一致。
一個(gè)小的測(cè)試
這個(gè)例子就是要讓你思考如何更快的找到右邊距屬性？
* { margin: 0; padding: 0; }
這些Tips可能幫助我更好的完成CSS代碼的編寫。但是這并不象征著這張列表的停止，接下來我將會(huì)去帶來一些其他的與大家分享。
你有什么更好的Tips幫助我們完美CSS代碼？ Tag：CSS代碼 CSS代碼
總結(jié)
我曉得一些人用這樣的辦法去組織代碼，其余人又用另一種方式去組織，然而在我的公司，咱們協(xié)商一致做出決定，所有的代碼都將依照字母排序來組織。通過這樣組織代碼與其別人協(xié)同工作必定是有贊助的。當(dāng)我遇到屬性不按照字母排序的層疊樣式表我每一次都會(huì)退縮。
1.重置
當(dāng)然，每個(gè)人都能夠編寫CSS代碼，甚至你當(dāng)初已經(jīng)讓它為你的項(xiàng)目工作了。但是CSS還可以更好嗎？開始用這5個(gè)Tips改良你的CSS吧！
2.排序
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
Eric Meyer Reset和YUI Reset都是十分強(qiáng)盛的，但是對(duì)我而言，它們走的太遠(yuǎn)了。我感到你終極需要重置所有，然后從新定義所有元素的屬性。這就是為什么Eric Meyer推舉更有效的使用（重置樣式表），而你不要只是使用他的重置樣式表，將它拖放到你的名目中。調(diào)劑它（的重置樣式表），樹立屬于自己的重置樣式 表。
5.從準(zhǔn)確的處所開端
當(dāng)我籌備宰割一張網(wǎng)頁的時(shí)候，創(chuàng)建CSS文件之前，我需要預(yù)覽并且標(biāo)記body開標(biāo)簽到body的閉合標(biāo)簽之間的所有文檔。我不會(huì)增添額定的DIV ,ID,或者類挑選器。我將會(huì)增加一些個(gè)別的DIV，就似乎hearder、content、footer.由于我知道這些貨色是事實(shí)存在的。
3.組織
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; }
你不能告知我Example#2不能更快的找到右邊距屬性。依據(jù)字母排序你的元素屬性。一致的創(chuàng)立你的CSS，將輔助你節(jié)儉破費(fèi)在尋找一個(gè)特別屬性的時(shí)光。
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; }
就我個(gè)人而言，我將使用兩者聯(lián)合的方式。假如一個(gè)取舍器超過了3個(gè)屬性，我將截?cái)嗨扇《嘈械姆绞骄帉憽?/p>
4.一致性
花更多的時(shí)間去制造它，當(dāng)你移除了填充（padding）你以為單選按鈕會(huì)產(chǎn)生什么變更？表單元素有時(shí)可以做些時(shí)興的事件，所以最有效的方式就是將他們獨(dú)破。
無論你決議應(yīng)用什么方法去編寫代碼，堅(jiān)持一致。我已經(jīng)對(duì)全體放在1行VS多行的CSS編寫編寫方式的爭辯覺得乏味跟疲憊。這是不須要辯論的。每個(gè)人都有本人的觀點(diǎn)，所以抉擇一種你愛好的工作方式，并在所有的款式表中保持一致。
噢，請(qǐng)結(jié)束使用：
它能很簡單的移除所有元素的填充（padding）和邊距（margin）：
Example#1
應(yīng)用CSS子選擇器指定子元素；不要只是機(jī)械的給元素增添類或者ID選擇器。記住：沒有一個(gè)良好的格局化文檔（或者標(biāo)記構(gòu)造）CSS是無價(jià)值的。
你應(yīng)當(dāng)組織你的樣式表以至相干的內(nèi)容靠在一起，更簡略的找到想要的。使用更有效的注解。舉個(gè)例子，這是我如何結(jié)構(gòu)我的層疊樣式表：
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
/*****Reset*****/
移除元素的填充（padding）和邊距（margin）。
/*****Basic Elements*****/
定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等.
/*****Generic Classes*****/
定義簡單的作風(fēng)，好像浮動(dòng)的某一側(cè), 移除元素的下邊距, 等當(dāng)然，它們大局部都與我們盼望的語義不相關(guān),但是它們是高效處置代碼所必需的。
/*****Basic Layout*****/
定義基礎(chǔ)的模板: header, footer等. 幫助定義網(wǎng)頁布局的根本元素
/*****Header*****/
定義所有Hearder元素
/*****Content*****/
定義所有內(nèi)容框內(nèi)的元素
/*****Footer*****/
定義所有Footer的元素
/*****Etc*****/
定義其他的選擇器。通過注解和歸類類似元素的分組，將更快的找到你想要的。
Example#2
首先，很當(dāng)真的告訴你，老是要重置某些分類。無論你是使用 Eric Meyer Reset、YUI Reset或者你自己編寫的重置代碼，只有使用就對(duì)了。
--> [
網(wǎng)站建設(shè)之]5種方法立即寫出更好的CSS代碼
通過先標(biāo)記文檔，你將不會(huì)遇到本已注定的divities1和classitis2麻煩!/*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.*/(原文未譯）。
在實(shí)現(xiàn)標(biāo)志語言之前不要去嘗試湊近你的樣式表。
相關(guān)的主題文章：
(責(zé)任編輯：網(wǎng)站建設(shè))
5種方法立刻寫出更好的CSS代碼相關(guān)文章