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-top
2. margin-right
3. margin-bottom
4. margin-left
5. margin
6. padding-top
7. padding-right
8. padding-bottom
9. padding-left
10. padding
11. border-top-width
12. border-right-width
13. border-bottom-width
14. border-left-width
15. border-width
16. border-top-color
17. border-right-color
18. border-bottom-color
19. border-left-color
20. border-color
21. border-top-style
22. border-right-style
23. border-bottom-style
24. border-left-style
25. border-style
26. border-top
27. border-bottom
28. border-right
29. border-left
30. border
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. compact
55. run-in
56. quotes
57. marker-offset
58. list-style-type
59. list-style-image
60. list-style-position
61. list-style
62. size
63. marks
64. page-break-before
65. page-break-after
66. page-break-inside
67. page
68. orphans
69. widows
70. color
71. background-color
72. background-image
73. background-repeat
74. background-attachment
75. background-position
76. background
77. font-family
78. font-style
79. font-variant
80. font-weight
81. font-stretch
82. font-size
83. font-size-adjust
84. font
85. text-indent
86. text-align
87. text-decoration
88. text-shadow
89. letter-spacing
90. word-spacing
91. text-transform
92. white-space
93. table-layout
94. empty-cells
95. speak-header
96. cursor
97. outline
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

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

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

追記

重複していた

• display
• position
• float
• content

を削除した。