[心得] CSS rule 書寫順序
/* 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
推
08/11 22:27, , 1F
08/11 22:27, 1F
→
08/11 22:28, , 2F
08/11 22:28, 2F
推
08/11 22:59, , 3F
08/11 22:59, 3F
推
08/11 23:24, , 4F
08/11 23:24, 4F
→
08/11 23:25, , 5F
08/11 23:25, 5F
→
08/11 23:26, , 6F
08/11 23:26, 6F
→
08/11 23:27, , 7F
08/11 23:27, 7F
推
08/11 23:27, , 8F
08/11 23:27, 8F
→
08/11 23:28, , 9F
08/11 23:28, 9F
→
08/11 23:29, , 10F
08/11 23:29, 10F
推
08/11 23:31, , 11F
08/11 23:31, 11F
推
08/11 23:38, , 12F
08/11 23:38, 12F
※ 編輯: ChowMein 來自: 112.104.185.52 (08/12 08:21)
→
08/12 13:58, , 13F
08/12 13:58, 13F
→
08/12 13:59, , 14F
08/12 13:59, 14F
→
08/12 14:00, , 15F
08/12 14:00, 15F
→
08/12 14:17, , 16F
08/12 14:17, 16F