CSS プロパティの記述順を考える

今までずっとやろうと思っていて怠けていた「CSSをきちんと書くこと」ですが、Web制作会社で働かせてもらった関係もあって最近自分のCSSの記述を見直しています。今さら^^;
(ちなみにこのサイトの記述は一年くらい前のなのでぐちゃぐちゃです。汗)

リストアップ

参考にさせてもらったのが、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-***-styleoutline-***は通常使わないので省略。
これを踏まえると以下のようになります。

  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でスタイルを指定していくイメージが湧く気がしますね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA