戻る

Mozilla.orgが提案する、CSSの指定順序

1つのセレクタに複数のプロパティを指定するとき、順番は決まっていません。今回の制作では、新たなプロパティを追加する際は、セレクタの一番最後に追加していきます。なお、プロパティの指定順番は予めルールを決めておくと管理しやすくなります。Mozilla.orgという団体が提案する順序を紹介しますので、参考にしてください。各プロパティは、次のような特徴を参考に、1から順に並べられています。

  1. 視覚整形モデル（表示や配置など）に関するプロパティ
  2. ボックスモデル（マージンやパディング、ボーダーなど）に関するプロパティ
  3. 背景と前景に関するプロパティ
  4. フォントとテキストに関するプロパティ
  5. 生成内容（任意の要素の前後に追加された、仮想的な文字や画像などの内容のこと）に関するプロパティ

Mozilla.orgが提案する、CSSの指定順序
display list-style position float
clear width height margin
padding border background color
font-style font-variant font-weight font-size
line-height font-family text-decoration text-align
vertical-align other text content  

inserted by FC2 system