[心得] CSS rule 書寫順序

[ChowMein (杉斑加紋)]

/* Suggested order:
 * display
 * list-style / table-layout
 * position / float / z-index / top right bottom left / clear
 * visibility / overflow / clip
 * width / height
 * margin / padding / border / outline
 * background
 * color
 * font
 * text-decoration / text-align / vertical-align / white-space
 * content / cursor
 * other
 */

這看起來有點亂, 但有一定規則,

先從 box model 看起, 由外而內, 外加一個 outline,
width / height
margin
padding
border
outline

這之前的是和整個 box 外觀位置有關,
display
list-style / table-layout
position
float
z-index
top right bottom left
clear
visibility / overflow / clip

之後則是 box 的內容部份, 由下而上
background
color
font
text ( text-decoration / text-align / vertical-align / white-space )
content / cursor

如果已熟悉 css, 應該很快就習慣, 而不熟悉的人, 也能從中得益.

8/12 編:
沒想到有類似的文件,
就如推文所言, 一個 rule set 沒幾行, 除錯修改, 照字母和box順序都差不多,
但能輕鬆寫出這順序, 代表著你對 box model 甚至整個css有一定程度的理解,
也許這可以拿來當考題.
寫css就是把html元素當成一個一個box, 寫得時候畫面自然浮現在腦中,
也很自然的就會寫成這種順序.

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 112.104.126.16
推 akiratw:這份PDF也有整理出來 http://bit.ly/cAgKow
→ akiratw:大原則就是從外往內寫，先蓋好房子再裝潢內部。
推 shimuraken:這篇整理的不錯，不過我的習慣是從A-Z排序來寫..
推 no1kk:我想要問的是，依照順序書寫的好處是什麼？
→ no1kk:依照過去的經驗一個樣式最多是寫到6條，偶有10左右的但很少
→ no1kk:所以也很少有閱讀上的困難，頂多是會把同類的擺一起如：
→ no1kk:(width,height)(top,left)(padding,margin)...等
推 oj113068:其實我也是同類派的，不是字母派的@ @
→ oj113068:另外我的字體設定和box模式大都分開，所以差不多都是
→ oj113068:4~5條結束，還沒有太長不易維護的困擾XD
推 pm2001:同類擺一起 結果寫到後來馬都是用firebug找在第幾行
推 akiratw:這篇是Mozilla建議的書寫順序 當然每個人有自己的習慣也行
※ 編輯: ChowMein        來自: 112.104.185.52       (08/12 08:21)
→ kurtisgod:我也是同類派
→ kurtisgod:其實我覺得  如何把css寫的精簡 更有效率才是重點
→ kurtisgod:不然如同前面版友說的 後來都嘛用firebug在找...
→ shadowjohn:個人覺得把可以讓使用者易調的部分集中上移比較好 …