三、格式化CSS屬性

當(dāng)我們編寫代碼的時(shí)候，使用一些特殊的編碼風(fēng)格會對提高CSS代碼的可讀性有很大幫助。許多人都有各自不同的編碼風(fēng)格。一部分人習(xí)慣于將顏色和字體的代碼放在前面，另外一部分則更喜歡將類似浮動(dòng)和定位的更“重要”的屬性放在前面。類似的，也可以將頁面元素按照它在布局中的結(jié)構(gòu)進(jìn)行排序：

body,
h1, h2, h3,
p, ul, li,
form {
margin: 0;
padding: 0;
border: 0;
}

一些開發(fā)者用一種更為有意思的方法：他們將屬性按首字母的順序排列。值得注意的是，這樣一種方法可能對某些瀏覽器會產(chǎn)生問題。不管自己的格式如何，你要確保你已經(jīng)清晰的定義了這些格式方法。這樣，你的同事在閱讀你的代碼的時(shí)候?qū)兄x你的努力。
四、合理的利用縮進(jìn)
為了讓你的代碼給人感覺更為直觀，你可以使用一行來定義大綱元素的樣式。當(dāng)指定的選擇器里的屬性超過三個(gè)的時(shí)候，這種方式將帶來混亂。但是，適度的使用這種方式，你可以很清楚的區(qū)分相同類的不同點(diǎn)。
#main-column { display: inline; float: left; width: 300px; }
#main-column h1 { margin-bottom: 20px; }
#main-column p { color: #333; }

同時(shí)，樣式修改的維護(hù)也是個(gè)比較麻煩的問題。很多人修改樣式之后就忘記了，結(jié)果后來又發(fā)現(xiàn)修改的樣式導(dǎo)致了頁面出錯(cuò)，不得不苦苦尋找。因此，為修改的樣式構(gòu)建一個(gè)特殊的格式就很必要了。一種很簡單的方式是，給修改過的樣式縮進(jìn)，同時(shí)，也可以使用一些注釋（比如"@new"）來做一個(gè)標(biāo)識。

#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */
}

總的來說，只有建立一個(gè)合適的樣式指南才會對樣式表的可讀性有所幫助。記住，移去每一個(gè)對你理解文件沒有幫助的樣式指南，避免對過多的元素使用過多的樣式指南。然后，為了一個(gè)可讀性可維護(hù)性良好的CSS文件而努力吧。不要忘記和jb51.net分享您的經(jīng)驗(yàn)，歡迎參與評論。

最新評論