幫我寫出更好的CSS代碼的一些技巧

2024-07-11 08:44:20

字體：大中小

來源：轉載

供稿：網友

這只是一些幫我寫出更好的代碼的一些技巧。當然這絕不是此文的結束，當我發現了其它技巧時，我會繼續分享的。
1. Reset
真的，要一直使用一個reset，無論是使用Eric Meyer Reset、YUI Reset、或者你自己的定制的reset，一定要使用。
這可以簡單到僅僅將所有元素中的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 Meyer和YUI的Resets樣式是很棒的，但對我來說，它們走的太遠了。我想要你清除所有東西，然后再重新定義元素的許多屬性。這就是Eric Meyer所推薦的。如果有更有效的方法是用它的話，你不應該只是拿來他的樣式文件，將它直接放到自己的項目中——提煉它，在它的基礎上重建，把它變成你自己的。
哦，請不要再這樣:
* { margin: 0; padding: 0; }
它被使用的地方太多了，如果把一個單選框的padding去掉，你覺得會發生什么事情？表單元素有的時候會有些比較時髦的表現，所以最好還是讓它們保持原狀吧。
2. 按字母排序
一個小測試
下面的兩個例子，你認為哪個能較快找到margin-right屬性的位置？
例1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
例2
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
不要告訴我例2沒有例1快！通過將這些樣式的屬性按照字母排序，你所創建的連貫性將幫你減少花費在尋找某個屬性的時間。
我知道有的人以這種方法組織排序，其他人又用另外的方法來組織樣式的順序。但是在我所在的公司，我們一致下定決心按照字母來排序。當你和其他人共同開發代碼的時候，這種方法肯定對你有用。每次看到某個樣式表沒有按照字母排序，我就很討厭，因為它們看起來比較凌亂無序……

上一篇：建議網頁開發者使用IE8測試版測試網站

下一篇：CSS初學福音:解決你對英文單詞的不理解