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

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

参照ガイドライン１：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

参照ガイドライン２：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（聴覚スタイルシート）

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

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

視覚フォーマットモデル

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

Tags

css