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

少し前に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で出てくる順序です」と明快に説明が出来ると便利なので、こんな自分ルールになっている。

追記

重複していた

を削除した。

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

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