スタイルプロパティの記述順番にもガイドラインを作ることで、コードが更に読みやすくなります。
記述順番ガイドライン
要素の大きさ・領域・装飾に関するプロパティ
- margin
- padding
- width
- min-width
- max-width
- height
- min-height
- max-height
- background-color
- background-image
- background-repeat
- background-position
- border-width
- border-style
- border-color
- outline-width
- outline-style
- outline-color
- list-style-type
- list-style-image
- list-style-position
- display
- visibility
- overflow
- clip
要素の位置に関するプロパティ
- float
- clear
- position
- top
- bottom
- left
- right
- z-index
テキストに関するプロパティ
- color
- font-family
- font-size
- font-weight
- font-style
- text-indent
- text-decoration
- text-align
- vertical-align
- line-height
- letter-spacing
- direction
- unicode-bidi
- text-shadow
- text-transform
- white-space
- word-spacing
テーブルに関するプロパティ
- table-layout
- caption-side
- border-collapase
- border-spacinfg
- empty-cells
- font-size-adjust
- font-stretch
- font-variant
その他特殊なもの
- cursor
- content
- counter-increment
- counter-reset
- quotes
このように単純に順番だけではなく、スタイルプロパティをカテゴリー分けすることでより読みやすいコードになります。
また、スタイルプロパティを追記する際にも2重で指定してしまうというミスを減らすことができます。
