DN*BLOG

2009.12.28

CSSを記述する際のプロパティの順番

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

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

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

とりあえず、見てみてください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系」です。

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

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

FavoriteLoadingAdd to favorites

Category : CSS

関連する記事