2009.04.28

CSSプロパティを記述する際の順番のサンプル

人によって様々な書き方があるCSSプロパティの順番。今回は参考になりそうなサンプルを紹介します。

「CSSプロパティの記述順序 - かたつむりくんのWWW」で紹介されていました分かりやすくキレイにまとまったサンプルです。Mozillaの順序をベースに、W3Cの仕様書（CSS2 Specification）と「Web標準の教科」の順番をミックスしたものらしいです。

CSSプロパティの記述の順番

 
1.表示や配置など「視覚整形モデル」に関するプロパティ
 display
 list-style**
   1. list-style-type
   2. list-style-image
   3. list-style-position
   4. marker-offset（CSS2.1勧告候補では削除）
 
 position**
   1. top
   2. right
   3. bottom
   4. left
 
 float
 clear
 z-index
 
2.ボックスモデルに関するプロパティ
 width**
   1. min-width
   2. max-width
 
 height**
   1. min-height
   2. max-height
 
 line-height
 vertical-align
 overflow
 clip
 visibility
 margin**
   1. margin-top
   2. margin-right
   3. margin-bottom
   4. margin-left
 
 padding**
   1. padding-top
   2. padding-right
   3. padding-bottom
   4. padding-left
 
 border**
   1. border-width
   2. border-top-width
   3. border-right-width
   4. border-bottom-width
   5. border-left-width
   6. border-color
   7. border-top-color
   8. border-right-color
   9. border-bottom-color
  10. border-left-color
  11. border-style
  12. border-top-style
  13. border-right-style
  14. border-bottom-style
  15. border-left-style
  16. border-top
  17. border-bottom
  18. border-right
  19. border-left
 
3.背景と前景に関するプロパティ
 background**
   1. background-color
   2. background-image
   3. background-repeat
   4. background-attachment
   5. background-position
 
4.フォントとテキストに関するプロパティ
 color
 font**
   1. font-family
   2. font-style
   3. font-variant
   4. font-weight
   5. font-stretch
   6. font-size
   7. font-size-adjust（CSS2.1勧告候補では削除）
 
 text-indent
 text-decoration
 text-align
 vertical-align
 white-space
 other text**
   1. text-shadow（CSS2.1勧告候補では削除）
   2. letter-spacing
   3. word-spacing
   4. text-transform
   5. white-space
 
5.表に関するプロパティ**
 
   1. caption-side
   2. table-layout
   3. border-collapse
   4. border-spacing
   5. empty-cells
 
6.生成内容に関するプロパティ**
 
   1. content
   2. counter-increment
   3. counter-reset
   4. quotes
 
7.UIに関するプロパティ**
 
   1. outline
   2. outline-width
   3. outline-style
   4. outline-color
   5. cursor
 
8.印刷に関するプロパティ**
 
   1. size
   2. marks
   3. page-break-before
   4. page-break-after
   5. page-break-inside
   6. page
   7. orphans
   8. widows
 
9.音声に関するプロパティ**
 
   1. speak-header
   2. volume
   3. speak
   4. pause-before
   5. pause-after
   6. pause
   7. cue-before
   8. cue-after
   9. cue
  10. play-during
  11. azimuth
  12. elevation
  13. speech-rate
  14. voice-family
  15. pitch
  16. pitch-range
  17. stress
  18. richness
  19. speak-punctuation
  20. speak-numeral

そのまま引用させていただいたのですが、vertical-alignとwhite-spaceが重複していてます。vertical-alignは「ボックスモデルに関するプロパティ」と「フォントとテキストに関するプロパティ」、white-spaceは「フォントとテキストに関するプロパティ」に2つ載っています。個人的には、vertical-alignは「フォントとテキストに関するプロパティ」として使うことが多いので、そちらに書きます。white-spaceは滅多に使うことがないので「フォントとテキストに関するプロパティ」の最後に書いてます。