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所推薦的。如果有更有效的方法是用它的話,你不應(yīng)該只是拿來他的樣式文件,將它直接放到自己的項目中——提煉它,在它的基礎(chǔ)上重建,把它變成你自己的。
哦,請不要再這樣:
* { margin: 0; padding: 0; }
它被使用的地方太多了,如果把一個單選框的padding去掉,你覺得會發(fā)生什么事情? 表單元素有的時候會有些比較時髦的表現(xiàn),所以最好還是讓它們保持原狀吧。
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快!通過將這些樣式的屬性按照字母排序,你所創(chuàng)建的連貫性將幫你減少花費在尋找某個屬性的時間。
我知道有的人以這種方法組織排序,其他人又用另外的方法來組織樣式的順序。但是在我所在的公司,我們一致下定決心按照字母來排序。當(dāng)你和其他人共同開發(fā)代碼的時候,這種方法肯定對你有用。每次看到某個樣式表沒有按照字母排序,我就很討厭,因為它們看起來比較凌亂無序……
出處:前端觀察
責(zé)任編輯:bluehearts
上一頁 下一頁 快速寫出較好CSS的5種方法 [2]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準化版塊參加討論,我還想發(fā)表評論。
|