=========================================================================== CSSの記述ルール --------------------------------------------------------------------------- * 目次 1. CSS規則 1-1. タイプセレクタの出現順序 1-2. セレクタの記述 1-3. プロパティの出現順序 1-4. プロパティと値の記述 1-5. 複数の値の記述 1-6. コメントの記述 1-7. ブラウザのバグ回避 --------------------------------------------------------------------------- =========================================================================== 1. CSS規則 --------------------------------------------------------------------------- 1-1. タイプセレクタの出現順序 XHTML Abstract Modulesに挙げられている順番を基準とする。 Type selectors http://www.w3.org/TR/CSS2/selector.html#type-selectors XHTML Abstract Modules http://www.w3.org/TR/xhtml-modularization/abstract_modules.html 以下にモジュールの順番を記す。 1. Structure Module 2. Text Module 3. Hypertext Module 4. List Module 5. Applet Module 6. Presentation Module 7. Edit Module 8. Bi-directional Text Module 9. Forms Module 10. Tables Module 11. Image Module 12. Object Module 13. Frames Module 14. Iframe Module 15. Metainformation Module 16. Scripting Module 17. Style Sheet Module 18. Link Module 19. Base Module 20. Legacy Module XHTML 1.1を利用する場合、Ruby Annotation Moduleを追加する。 Ruby Annotation Module http://www.w3.org/TR/2001/REC-ruby-20010531/#abstract-def また、それぞれのモジュールの先頭には、コメントで目次を記述し、 参照先については、URLの前に1つのタブを用いてインデントする。 例) /*===================================================================================== List Module http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_listmodule =====================================================================================*/ コメントの記述については、1-6にて後述する。 また、使用しないモジュールについては、目次共に記述しない。 以下にセレクタの順番を記す。 また、モジュール毎に改行を挟む。 1. body 2. head 3. html 4. title 5. abbr 6. acronym 7. address 8. blockquote 9. br 10. cite 11. code 12. dfn 13. div 14. em 15. h1 16. h2 17. h3 18. h4 19. h5 20. h6 21. kbd 22. p 23. pre 24. q 25. samp 26. span 27. strong 28. var 29. a 30. dl 31. dt 32. dd 33. ol 34. ul 35. li 36. applet 37. param 38. b 39. big 40. hr 41. i 42. small 43. sub 44. sup 45. tt 46. del 47. ins 48. bdo 49. form 50. input 51. select 52. option 53. textarea 54. button 55. fieldset 56. label 57. legend 58. optgroup 59. caption 60. table 61. td 62. th 63. tr 64. col 65. colgroup 66. tbody 67. thead 68. tfoot 69. img 70. object 71. param 72. frameset 73. frame 74. noframes 75. iframe 76. meta 77. noscript 78. script 79. style 80. link 81. base 82. basefont 83. center 84. dir 85. font 86. isindex 87. menu 88. s 89. strike 90. u 91. ruby 92. rbc 93. rtc 94. rb 95. rt 96. rp 参考: http://hxxk.jp/2006/08/17/0037#sub-20060817-02 --------------------------------------------------------------------------- 1-2. セレクタの記述 優先順位など特別な理由がない場合、 クラスセレクタ・IDセレクタの要素名は記述しない。 複数のセレクタにスタイルを定義する場合、 , 直後に改行する。 例) h1, #header { ... } シンプルセレクタの区切りには必ずスペースを挟む。 これは、 > + や、その後にも増えるであろう記号の間にも適用される。 例) #header + .section > h2 セレクタはインデントされない。 参考: http://www.code-404.net/dont-forget-the-rules ------------------------------------------------------------------------------ 1-3. プロパティの出現順序 CSS2 Specificationに挙げられている順番を基準とする。 CSS2 Specification http://www.w3.org/TR/CSS2 以下にその順番を記す。 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 参考: http://www.code-404.net/dont-forget-the-rules ------------------------------------------------------------------------------ 1-4. プロパティと値の記述 プロパティ直後に : を記述し、値の直後に ; を記述する。 その間にはスペースが1つだけ挟まれる。 例) display: none; 色の値には16進数のみを用い、全て小文字で記述する。 例) #0000ff 値の記述に引用符が必要な場合、 " を用いる。 値に " が存在する場合、 ' を引用符に用いる。 例) content: '"'; font-family: "Lucida Console"; プロパティの前に1つのタブを用いてインデントされる。 参考: http://www.code-404.net/dont-forget-the-rules ------------------------------------------------------------------------------ 1-5. 複数の値の記述 複数の値がある場合、区切り文字の , の直後に1つだけスペースを置く。 例) font-family: Osaka, sans-serif, serif; 参考: http://www.code-404.net/dont-forget-the-rules ------------------------------------------------------------------------------ 1-6. コメントの記述 コメントの内容の両端には1つずつスペースを置く。 例) /* コメント */ 注釈としてのコメントは、 そのプロパティの定義の直後に1つのスペースを挟んで記述する。 例) height: 100%; /* For IE */ ブロックそのものに注釈を記述する場合、 そのセレクタの前に1行を用いて記述する。 例) /* コメント */ #header, #footer { ... } コメントが複数行に亘る場合、 連続したダッシュ、或いはイコールでコメント開始と終了を装飾する。 その際は、開始と終了の装飾記号を統一し、 "コメントの内容の両端には1つずつスペースを置く"というルールは適用されない。 そしてコメント内容はスペース4つでインデントされる。 例) /*============================ 複数行に亘る コメントが記述される。 ============================*/ 参考: http://www.code-404.net/dont-forget-the-rules ------------------------------------------------------------------------------ 1-7. ブラウザのバグ回避 * CSSの正当性を保つ事を優先し、 Invalidな回避法は使用しない。 * contentプロパティにマルチバイトを含む場合、 Safariにて文字化けを避ける為、エンコードしておく。 * fontプロパティにinheritを含む場合、 Firefox 1.5.*でプロパティ自体を無視される為、個別に指定する。 * バグ回避に関する記述は、"Appendix"としてまとめて記述する。 参考: http://www.code-404.net/dont-forget-the-rules ==============================================================================