CSS3も少し入れつつ自分流CSSプロパティの書き順を決めてみた

今まで何となく並べていたCSSプロパティですが、記述する順番を決めてみました。このブログはよくコードを紹介しますし、見たときに伝わりやすいよう意識して考えました。

css-property-order.png

色々調べてみると絶対に正しいという順番はなさそうで、mozilla.org Base StylesCascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specificationを参考にして自分で決めている人が多いようです。

ということで、mozilla.org Base Stylesで推奨している以下の順番に沿って考えていくことに。

/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 *
 */

まずこれらを内容ごとにグループ分けしてCascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specificationの順番を参考にしつつプロパティを追加すると分けやすいでしょうか。

さらに、最近はCSS3のプロパティを使うことも多いので考えないといけないです。ところで、以下のようにCSS3は「セレクタ」「フォントに関するもの」「色に関するもの」などその内容を細分化してそれぞれW3C勧告に向けて進んでいます。

これらの中にあるプロパティは当然内容的に近いものですし、順番を決める際の参考になります。とはいうもののかなりの量になりますので今回は今まで使ったことがあるもののみにしています。

ちなみに最終のW3C勧告になるまでの流れは以下のようになっています。

W3C勧告プロセス
Working Draft (WD)草案
Last Call (LC)最終草案
Candidate Recommendation (CR)勧告候補
Proposed Recommendation (PR)勧告案
Recommendation (REC)W3C勧告

どの段階にあるかはCSS current work & how to participateで確認できます。

また、list-style、backgroundなどのように略せるものは略して書くようにしていますが、略さない場合も下に載せています。略し方については「まとめて書くことができるCSSプロパティの8つのパターン|Webpark」をご参考に。

若干それましたが、試行錯誤して並べた結果がこちらです。普段よく使うプロパティのみ載せています。

表示に関するプロパティ

まずは表示に関する内容です。見える見えないは一番大切なことということでしょうか。

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

配置に関するプロパティ

次はどこに配置するかです。回り込みや重なったときの優先順位なども含めてみました。

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

ボックスモデルに関するプロパティ

全体の大きさを決めるボックスモデルに関するものです。

padding、margin、borderを個別に指定する場合、上右下左の順に記述します。box-sizingはボックスサイズの算出方法を指定するものですのここにしています。box-shadowは微妙ですが次のbackgroundと近い方がよさそうなのでこの辺で。

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

背景に関するプロパティ

グラデーションを使うときはbackgroundの後にbackground-imageを指定することも多いです。

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

テキストに関するプロパティ

今まで背景の前にテキストの色を指定することが多かったように思いますが、今後は背景色を先にします。どちらにせよ近い方がいいですね。

  • color
  • font
    • font-family
    • font-style
    • font-variant
    • font-weight
    • font-size
    • line-height
  • text-decoration
  • text-align
  • vertical-align
  • letter-spacing
  • word-spacing
  • text-transform
  • white-space
  • text-shadow

内容の追加に関するプロパティ

これはもっと前の方がいい気もしますがここで。

  • content
  • quotes
  • counter-reset
  • counter-increment

ユーザーインターフェースに関するプロパティ

  • cursor
  • resize

アニメーションに関するプロパティ

同時に使うことはないと思うので、どっちが先でもいいですね。

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

ということで、今さらながらCSSプロパティの書き順を考えてみました。わざわざ記事にする必要もない気もしましたが、結構時間がかかったので記事にしてみました。何かの参考になればうれしいです。

過去にも皆さん色々考えておられ参考になりました。ここにCSS3が加わると膨大な量になりますね。

今後普及してきたCSS3プロパティを追加していければと思います。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
自分の記述順を見直すいい機会になりました。参考になりました。
【2013/03/12 16:19】 | 73 #- | [edit]
73さん

コメントありがとうございます。
参考になってうれしいです。
またお立ち寄りください〜
【2013/03/12 18:02】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加