|
3.有組織的
你應(yīng)該組織你的樣式，這樣你就可以比較容易的找到想要的內(nèi)容以及放在一起的相關(guān)條目。這可以使用注釋的方法。例如，我是這樣組織我的樣式表的:
/*****Reset*****/
Reset
/*****Basic Elements*****/
為基本元素定義樣式: body, h1-h6, ul, ol, a, p, etc.
/*****Generic Classes*****/
定義一些單獨(dú)的樣式，比如，浮動(dòng)、去掉元素的底部邊距等。
是的，可能他們不夠語(yǔ)義化，但是，它們對(duì)有效的編碼是很有效的。
/*****Basic Layout*****/
定義基本模板: 頭部、底部、等，用來(lái)定義網(wǎng)站的基本結(jié)構(gòu)
/*****Header*****/
定義頭部的所有元素
/*****Content*****/
定義內(nèi)容區(qū)域的所有元素
/*****Footer*****/
底部樣式
/*****Etc*****/
繼續(xù)定義其它樣式通過(guò)使用注釋和對(duì)相似元素進(jìn)行分組，可以更快的找到你需要的內(nèi)容。
4. 一致性
無(wú)論你現(xiàn)在以何種方式編碼，保持下去。我十分討厭關(guān)于完全單行或者完全多行的爭(zhēng)議，這本身是沒(méi)有什么可爭(zhēng)議的! 每個(gè)人都有自己的看法，所以就用你認(rèn)為對(duì)的并自始至終保持下去。
就我個(gè)人而言，我使用混合模式，如果一個(gè)樣式有超過(guò)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; }
我使用這種方法是因?yàn)槲业奈谋揪庉嬈饕恍性趽Q行前正好能容納大概3個(gè)屬性，如果沒(méi)有太多的屬性，顯然單行要比多行更易讀。
5.從正確的地方開(kāi)始
在你寫(xiě)好你的標(biāo)簽之前不要?jiǎng)幽愕臉邮轿募?/strong>
當(dāng)我準(zhǔn)備開(kāi)工的時(shí)候，在我創(chuàng)建一個(gè)CSS文件之前，我檢查并對(duì)整個(gè)文檔進(jìn)行編碼(HTML)，從開(kāi)始body標(biāo)簽到結(jié)束整個(gè)body標(biāo)簽。不添加任何多余的div、id或class。我會(huì)添加一些通用的div，比如頭部，內(nèi)容，底部，因?yàn)槲抑肋@些東西肯定會(huì)有。
通過(guò)先編碼整個(gè)文檔，你可以避免出現(xiàn)多DIV癥或多類(lèi)癥，這些毛病有的時(shí)候可能是致命的！ 你只需要在你開(kāi)始寫(xiě)CSS和確定需要另外的東西來(lái)實(shí)現(xiàn)相關(guān)效果的時(shí)候再加入它們。
使用CSS的向后選擇器來(lái)定義子元素。不要直接自動(dòng)的為元素添加類(lèi)或id。請(qǐng)記住，如果一個(gè)文檔沒(méi)有良好的格式(結(jié)構(gòu))，CSS是毫無(wú)價(jià)值的。
*編輯注: 我不能足夠的強(qiáng)調(diào)這一點(diǎn)。就像Trevor 說(shuō)的, 在沒(méi)有100%完成HTML之前，不要?jiǎng)幽愕腃SS文件。
結(jié)論
這只是一些幫我寫(xiě)出更好的代碼的一些技巧。當(dāng)然這絕不是此文的結(jié)束，當(dāng)我發(fā)現(xiàn)了其它技巧時(shí)，我會(huì)繼續(xù)分享的。
譯自：http://net.tutsplus.com/
原文：http://www.qianduan.net/?p=5539
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2912900-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2009/6458.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁(yè) 快速寫(xiě)出較好CSS的5種方法 [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 快速寫(xiě)出較好CSS的5種方法 [2]
