リストアップ

参考にさせてもらったのが、hail2u.netさまの記事にあった、CSS2 Specificationの記述順です。全部並べてみると、

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. caption-side
94. table-layout
95. border-collapse
96. border-spacing
97. empty-cells
98. speak-header
99. cursor
100. outline
101. outline-width
102. outline-style
103. outline-color
104. volume
105. speak
106. pause-before
107. pause-after
108. pause
109. cue-before
110. cue-after
111. cue
112. play-during
113. azimuth
114. elevation
115. speech-rate
116. voice-family
117. pitch
118. pitch-range
119. stress
120. richness
121. speak-punctuation
122. speak-numeral

こんなたくさんあったのね。こういう順。ちなみにhail2u.netさんの記事に加えてテーブル系のプロパティcaption-side,border-collapse,border-spacingとユーザインターフェイス系のプロパティoutline-width,outline-style,outline-colorを足しています。

シェイプアップ

実際このすべてを使う訳でもないし、プロパティによって使用頻度の差が結構あります。

しかもこの数を毎回見て順序を探したりするのは結構大変なので、これをもとに自分なりの順にまとめてみることにします。ポイントは、

• 基本は上のCSS2 Specificationの出現順
• まとめて記述できるプロパティは(自分が使う程度で)まとめる
• 関連したプロパティをまとめる
• 使用頻度が低いもの、現時点でこれは使わないでしょ、ってものは思い切って省略する

主に音声スタイルシート系、ページ媒体系のプロパティは省略しています。また、border-***-width,border-***-color,border-***-style、outline-***は通常使わないので省略。
これを踏まえると以下のようになります。

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

まとめ、+α

だいぶ僕にも覚えられる数になりました。これからこれをもとにしてプロパティを記述していこうと思っています。

ちなみに、このCSS2 Specificationの目次を見るとわかるように、上記のCSSのプロパティは以下のようなカテゴリで括られて書かれています。

1. ボックスモデル
2. 視覚整形モデル
3. 視覚整形モデル詳細
4. 視覚効果
5. 内容生成、自動番号振り、リスト
6. ページ媒体
7. 文字色と背景
8. フォント
9. テキスト
10. テーブル
11. ユーザインターフェイス
12. 音声スタイルシート

この名称と上の記述順を見比べると、なんとなくCSSでスタイルを指定していくイメージが湧く気がしますね。