pur*log

Tag: code, CSS, guideline

CSS の記述において、ある１つのセレクタに対して複数のプロパティを記述することは日常的に行われますが、プロパティを記述する順番がセレクタの種類によってバラバラになってしまいがちです。

例えば、このような感じです。

ul li {
  font-size: 90%;
  list-style-type: square;
  margin: 0;
  padding: 0;
}

ol li {
  padding: 0;
  margin: 0;
  font-size: 90%;
  list-style-type: decimal;
}

バラバラになって特に問題が起きるわけではありません（同一セレクタ内に同一プロパティが複数存在する場合は後に記述したものが優先されるので問題です）が、なんだか気持ち悪い気がしたので、まずはCSS2 仕様書邦訳の解説を順番に読んでみて、視覚系ブラウザに必要なプロパティかつ、現状普及している主要ブラウザで解釈できるプロパティをざっと順番に抜き出してみたところ以下のとおりとなりました。（間違いがありましたらご指摘ください）

1. margin
2. padding
3. border
4. display
5. position
6. top
7. right
8. bottom
9. left
10. float
11. clear
12. z-index
13. width
14. min-width
15. max-width
16. height
17. min-height
18. max-height
19. line-height
20. vertical-align
21. overflow
22. visibility
23. content
24. list-style
25. color
26. background
27. font
28. text-indent
29. text-align
30. text-decoration
31. text-shadow
32. letter-spacing
33. word-spacing
34. text-transform
35. white-space
36. table-layout
37. border-collapse
38. border-spacing
39. empty-cells
40. cursor

せっかくなのでこの出現順に書いていったほうが気持ちよさそうなので今後は配慮して記述してみようと思います。

仕様書の出現順、というやり方はのちにリファレンスを参照する際に、順番に眺めていけるので自分なりには理解しやすいような気がします。

• CSS2.1（仮）- セレクタ -2.3.5 機能ブロックとセレクタ

• by purprin
• at May 11, 2006 02:03
• in Web
•