三、格式化CSS屬性

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

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

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

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

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

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

最新評論