CSSプロパティの順番

最近、少し意識してる
見た目も大事だけど、まずちゃんと適用されるかが重要

表示に関するもの

  • display
  • list-style -type -image -position
  • overflow
  • clip
  • visibility
  • opacity

配置に関するもの

  • position top right bottom left
  • zoom
  • float
  • clear
  • z-index
  • transform

ボックスモデルに関するもの

  • width min-width max-width
  • height min-height max-height
  • margin
  • padding
  • border -width -color -style -radius -image
  • box -sizing -shadow

背景に関するもの

  • background -color -image -repeat -attachment -position -clip -origin -size

テキストに関するもの

  • color
  • font -family -style -variant -weight -size
  • line-height
  • text -indent -decoration -align
  • vertical-align
  • letter-spacing
  • word-spacing
  • text-transform textとこに持ってける?
  • white-space
  • text-shadow textとこに持ってける?

表に関するもの

  • caption-side
  • table-layout
  • border-collapse
  • border-spacing
  • empty-cells

内容の追加に関するもの

  • content
  • quotes
  • counter -reset -increment

UIに関するもの

  • cursor
  • outline -width -style -color
  • resize

印刷に関するもの

  • size
  • marks
  • page-break -before -after -inside
  • orphans
  • widows

音声に関するもの

  • speak -header -punctuation -numeral
  • volume
  • pause -before -after
  • cue -before -after
  • play-during
  • azimuth
  • elevation
  • speech-rate
  • voice-family
  • pitch -range
  • stress
  • richness

アニメーションに関するもの

  • transition -property -duration -timing-function -delay
  • animation -name -duration -timing-function -iteration-count -direction -play-
  • state -delay -fill-mode

最後に

  • CSS3

aについてはこの順

:link :visited :hover :active
これは見た目とかではなくちゃんと適用されるかの問題なので必須
参考:実は重要!スタイルシートの記述順!|[ホームページ作成] All About

ベンダープレフィックス

ベンダープレフィックス後に普通の

-webkit-border-radius: 2px; /* Chrome、Safari、(Opera) */
-moz-border-radius: 2px; /* Firefox */
-ms-border-radius: 2px; /* IE */
-o-border-radius: 2px; /* Opera */
border-radius: 2px;

こうすると

  • 前のプロパティを設定しなおさなくて良くなる これは重要
  • プロパティの役割ごとに並ぶ 綺麗にまとまる
  • 継承を利用せず頻繁に設定するものほど上(独自に追加する時は追記するだけ) これも重要かな

あとがき

見た事ない・使わないようなのもあった
いくつか、text-transformやtext-shadow あたりとか順番かえたいんだがかえたら適用されなくなったりするのか気になる
参考:
CSS3も少し入れつつ自分流CSSプロパティの書き順を決めてみた|Webpark
CSSプロパティを記述する際の順番のサンプル|web bibo


コメントを残す

メールアドレスが公開されることはありません。