規(guī)范的CSS代碼的五個(gè)原則

1、規(guī)范的CSS代碼的五個(gè)原則快速寫(xiě)出較好CSS的5種方法首先要使用合理使用Reset。真的,要一直使用一個(gè)reset,網(wǎng)上有很多寫(xiě)的不錯(cuò)的reset,比如yahoo 的,騰訊的寫(xiě)的都不錯(cuò)。無(wú)論是誰(shuí)的,或者你自己的定制的reset,一定要使用。這可以簡(jiǎn)單到僅僅將所有元素中的margin和padding屬性去掉: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; Eric Meye

2、r和YUI的Resets樣式是很棒的,但對(duì)我們來(lái)說(shuō),它們走的太遠(yuǎn)了。Eric Meyer推薦你清除所有東西,然后再重新定義元素的許多屬性。最好的辦法是,不要盲目使用別人的reset樣式,要懂得節(jié)儉,提煉成自己的使用。也許我們都習(xí)慣用* margin: 0; padding: 0; ,但是它被使用的地方太多了,如果把一個(gè)單選框的padding去掉,你覺(jué)得會(huì)發(fā)生什么事情?表單元素有的時(shí)候會(huì)有些比較時(shí)髦的表現(xiàn),所以最好還是讓它們保持原狀吧。其次是按字母排序。先做一個(gè)一個(gè)小測(cè)試,下面的兩個(gè)例子,你認(rèn)為哪個(gè)能較快找到margin-right屬性的位置?例1div#header h1 z-index: 1

3、01;color: #000;position: relative;line-height: 24px;margin-right: 48px;border-bottom: 1px solid #dedede;font-size: 18px;例2div#header h1 border-bottom: 1px solid #dedede;color: #000;font-size: 18px;line-height: 24px;margin-right: 48px;position: relative;z-index: 101;不要告訴我例2沒(méi)有例1快!通過(guò)將這些樣式的屬性按照字母排序,你所創(chuàng)建

4、的連貫性將幫你減少花費(fèi)在尋找某個(gè)屬性的時(shí)間。我知道有的人以這種方法組織排序,其他人又用另外的方法來(lái)組織樣式的順序。但是在我所在的公司,我們一致下定決心按照字母來(lái)排序。當(dāng)你和其他人共同開(kāi)發(fā)代碼的時(shí)候,這種方法肯定對(duì)你有用。每次看到某個(gè)樣式表沒(méi)有按照字母排序,我就很討厭,因?yàn)樗鼈兛雌饋?lái)比較凌亂無(wú)序再次是合理的組織你的樣式你應(yīng)該組織你的樣式,這樣你就可以比較容易的找到想要的內(nèi)容以及放在一起的相關(guān)條目。這可以使用注釋的方法。例如,我是這樣組織我的樣式表的:/*Reset*/Reset/*Basic Elements*/為基本元素定義樣式: body, h1-h6, ul, ol, a, p, etc.

5、/*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)容。書(shū)寫(xiě)風(fēng)格的一致性。無(wú)論你現(xiàn)在以何種方式編碼,保持下去。我十分討厭關(guān)于完全單行或者完全多行的爭(zhēng)議,這本身是沒(méi)有什么可爭(zhēng)議的!每個(gè)人都有自己的看法,所以就用你認(rèn)為對(duì)的

6、并自始至終保持下去。就我個(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)有太多的屬性,顯

7、然單行要比多行更易讀。完成HTML前不要?jiǎng)覥SS記著,在你寫(xiě)好你的標(biāo)簽之前不要?jiǎng)幽愕臉邮轿募?。?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)