DN*BLOG

たぶん、皆さんそれぞれルールを決めてやっていると思うんですよ。

自分のルールを作っておかないと修正の時に見つけるのとか面倒ですしね。
パッとみてこのスタイルにはこのプロパティがあたっている。って理解したいですからね。

いろんな方が順番はこんな感じです。って記事を書いているのを見ますけど、自分と結構違っているので不安な部分も・・・。

とりあえず、見てみてくださいw

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

こんな感じです。
コレの通りぴったり！って完璧には決めていないですけど、キモになる部分は順番は意識しています。

「width」と「height」は必ず先頭に書いています。
すぐにサイズとかがわかるので見やすいため。

「margin」と「padding」は最後。
これも見やすさ重視。
数値がずれると表示が崩れる原因になるひとつでもありますし。

その他のレイヤーにかんする記述。「position」とか「float」とか。
これらは、「margin」の上に書いています。

「width」と「height」の下には装飾系をおいています。
「background」や「border」とか「font系」です。

という具合に分けています。

自分のコーディングの精度をあげるにはこういった細かいところからも見直すといいかもしれないですね。