プロパティの記述順序:CSSコーディングガイドライン

さあ、今すぐルールを作ろう!

cssプロパティ書き順記事へ

CSSプロパティの記述順序に、厳格なルールはありません。

ですが、ある程度ガイドラインを決めておいた方が、共有やメンテナンスがしやすくなります。

今日は、私が日々のタスクで使用している、ガイドライン(※CSS3は除く)を紹介しますので、ご参考ください。

参照ガイドライン1:mozilla.org Base Styles

有名なCSSコーディングガイドライン「mozilla.org Base Styles」に示されている、プロパティ記述順は以下のとおりです。

  1. display
  2. list-style
  3. position
  4. float
  5. clear
  6. width
  7. height
  8. margin
  9. padding
  10. border
  11. background
  12. color
  13. font
  14. text-decoration
  15. text-align
  16. vertical-align
  17. white-space
  18. other text
  19. content

参照ガイドライン2:CSS2 Specification

W3CのCSSコーディングガイドラインあるCSS2 Specificationも、参考にされている方が多いです。

CSS2 Specificationにおける、記述順ルールは下記となっています。

  1. Media types(メディアタイプ)
  2. Box model(ボックスモデル)
  3. Visual formatting model(視覚整形モデル)
  4. Visual formatting model details(視覚整形モデル詳細)
  5. Visual effects(視覚効果)
  6. Generated content, automatic numbering, and lists(生成されたコンテンツ、自動採番、およびリスト)
  7. Paged media(ページ媒体)
  8. Colors and Backgrounds(色と背景)
  9. Fonts(フォント)
  10. Text(テキスト)
  11. Tables(テーブル)
  12. User interface(ユーザー·インターフェース)
  13. Aural style sheets(聴覚スタイルシート)

私が日々のコーディングで使用しているガイドライン

上記2つをもとにした、私が仕事で使用しているプロパティ記述順のガイドラインを紹介しますので、ぜひお役立ていただければと思います。

視覚フォーマットモデル

  1. display
  2. position
  3. top
  4. right
  5. bottom
  6. left
  7. z-index
  8. float
  9. clear
  10. direction
  11. unicode-bidi
  12. min-width
  13. width
  14. max-width
  15. min-height
  16. height
  17. max-height
  18. line-height
  19. vertical-align

視覚効果

  1. overflow
  2. clip
  3. visibility

ボックスモデル

  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-width
  13. border-color
  14. border-style
  15. border-top
  16. border-right
  17. border-bottom
  18. border-left
  19. border-top-width
  20. border-right-width
  21. border-bottom-width
  22. border-left-width
  23. border-top-color
  24. border-right-color
  25. border-bottom-color
  26. border-left-color
  27. border-top-style
  28. border-right-style
  29. border-bottom-style
  30. border-left-style

生成内容,自動番号付け及びリスト

  1. content
  2. quotes
  3. counter-reset
  4. counter-increment
  5. marker-offset
  6. list-style
  7. list-style-type
  8. list-style-image
  9. list-style-position

カラー

  1. color

フォント

  1. font
  2. font-family
  3. font-style
  4. font-variant
  5. font-weight
  6. font-stretch
  7. font-size
  8. font-size-adjust

テキスト

  1. text-indent
  2. text-align
  3. text-decoration
  4. text-shadow
  5. letter-spacing
  6. word-spacing
  7. text-transform
  8. white-space

バックグラウンド

  1. background
  2. background-color
  3. background-image
  4. background-repeat
  5. background-attachment
  6. background-position

テーブル

  1. caption-side
  2. table-layout
  3. border-collapse
  4. border-spacing
  5. empty-cells
  6. speak-header

UI

  1. cursor
  2. outline
  3. outline-width
  4. outline-style
  5. outline-color

聴覚スタイルシート

  1. volume
  2. speak
  3. pause
  4. pause-before
  5. pause-after
  6. cue
  7. cue-before
  8. cue-after
  9. play-during
  10. azimuth
  11. elevation
  12. speech-rate
  13. voice-family
  14. pitch
  15. pitch-range
  16. stress
  17. richness
  18. speak-punctuation
  19. speak-numeral

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply