CSS2 Specificationでのプロパティの出現順序

Posted at 2006-08-31T12:21:00+09:00 in Web Design

少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。大体のところはソラで覚えているのだけど、font-weightとfont-sizeはどっちが先だっけとかは忘れるので、備忘録がてら序列付きリストにしてみた。

1. margin
2. margin-top
3. margin-right
4. margin-bottom
5. margin-left
6. padding
7. padding-top
8. padding-right
9. padding-bottom
10. padding-left
11. border
12. border-top
13. border-bottom
14. border-right
15. border-left
16. border-width
17. border-top-width
18. border-right-width
19. border-bottom-width
20. border-left-width
21. border-color
22. border-top-color
23. border-right-color
24. border-bottom-color
25. border-left-color
26. border-style
27. border-top-style
28. border-right-style
29. border-bottom-style
30. border-left-style
31. display
32. position
33. top
34. right
35. bottom
36. left
37. float
38. clear
39. z-index
40. direction
41. unicode-bidi
42. width
43. min-width
44. max-width
45. height
46. min-height
47. max-height
48. line-height
49. vertical-align
50. overflow
51. clip
52. visibility
53. content
54. quotes
55. counter-reset
56. counter-increment
57. list-style
58. list-style-type
59. list-style-image
60. list-style-position
61. page-break-before
62. page-break-after
63. page-break-inside
64. orphans
65. widows
66. color
67. background
68. background-color
69. background-image
70. background-repeat
71. background-attachment
72. background-position
73. font
74. font-family
75. font-style
76. font-variant
77. font-weight
78. font-size
79. text-indent
80. text-align
81. text-decoration
82. text-shadow
83. letter-spacing
84. word-spacing
85. text-transform
86. white-space
87. caption-side
88. table-layout
89. border-collapse
90. border-spacing
91. cursor
92. empty-cells
93. speak-header
94. outline
95. outline-width
96. outline-style
97. outline-color
98. volume
99. speak
100. pause-before
101. pause-after
102. pause
103. cue-before
104. cue-after
105. cue
106. play-during
107. azimuth
108. elevation
109. speech-rate
110. voice-family
111. pitch
112. pitch-range
113. stress
114. richness
115. speak-punctuation
116. speak-numeral
117. speak-header

そもそもCSSは複雑に書こうとする方が難しく、フラットで単純な構造のコードになる。そのため、ある要素に対するスタイル指定がCSSファイル内であちらこちらに散らばっているような書き方さえしなければそれほど読みづらいものではないので、自分で書いて自分で読む分にはプロパティの順序なんかはどうでも良いとも思う。

しかし、CSSを第三者に読ませるとなると、どういうルールで書いているかとかそういうことを説明しなければならない(ことがある)。そういった時に「プロパティの記述順はCSS2 Specificationで出てくる順序です」と明快に説明が出来ると便利なので、こんな自分ルールになっている。

追記

重複していた

• display
• position
• float
• content

を削除した。

追記@2009-11-14T10:28:46+09:00

CSS 2.1 Canditate Recommendation 08 September 2009から序列付きリストを作成しなおした。