CSS Property Order

近年、実務で使用可能なCSS3プロパティが増えたことにより、プロパティ記述順に迷う場面が多くなってきました。
これまでmozilla.org Base Stylesをベースにしつつ、都度判断で記述していましたが、いちど情報を整理して自分なりのルールを作ってみました。

my order

W3C仕様書の機能分類をベースに、作業効率を考えてなるべく関連するプロパティが並ぶよう調整しました。
テーブル関連プロパティは、ボックスモデル相当の機能が中心で他のボックス関連プロパティと同時に記述することが無いため、ボックスモデルと合わせています。
IE非対応のプロパティや、プレフィックスを必要とするプロパティの扱いは考慮中。テキスト関連プロパティ順などまだ改善の余地アリなので随時更新予定。

視覚整形モデル

• display
  　
• flex
  • flex-grow
  • flex-shrink
  • flex-basis
• flex-flow
  • flex-direction
  • flex-wrap
    　
• grid
  • grid-template
    • grid-template-rows
    • grid-template-columns
    • grid-template-areas
  • grid-auto-flow
  • grid-auto-rows
  • grid-auto-columns
  • grid-gap
    • grid-row-gap
    • grid-column-gap
  • grid-area
    • grid-row
      • grid-row-start
      • grid-row-end
    • grid-column
      • grid-column-start
      • grid-column-end
        　
• align-content
• align-items
• align-self
• justify-content
• justify-items
• justify-self
• order
  　
• position
• top
• right
• bottom
• left
• z-index
• transform
  • transform-origin
  • transform-style
  • backface-visibility
  • perspective
• float
• clear

視覚効果

• overflow
• overflow-x
• overflow-y
• visibility

ボックスモデル/テーブル

• box-sizing
• table-layout
• caption-side
• empty-cells
• width
• min-width
• max-width
• height
• min-height
• max-height
• margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
• padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
• border-collapse
• border-spacing
• border
  • border-width
    • border-top-width
    • border-right-width
    • border-bottom-width
    • border-left-width
  • border-style
    • border-top-style
    • border-right-style
    • border-bottom-style
    • border-left-style
  • border-color
    • border-top-color
    • border-right-color
    • border-bottom-color
    • border-left-color
  • border-radius
    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius
  • border-image
    • border-image-source
    • border-image-slice
    • border-image-width
    • border-image-outset
    • border-image-repeat
• box-shadow

背景

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

画像

• object-fit
• object-position

色

• opacity
• color

フォント/テキスト

• font
  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • font-size
  • line-height
  • font-family
• font-feature-settings
• -webkit-font-smoothing
• text-align
• vertical-align
• text-indent
• text-transform
• text-decoration
  • text-decoration-color
  • text-decoration-style
  • text-decoration-line
• text-overflow
• white-space
• letter-spacing
• word-spacing
• word-break
• word-wrap
• overflow-wrap(word-wrapと同じ)
• text-shadow

マルチカラム

• columns
  • column-width
  • column-count
• column-fill
• column-gap
• column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
• column-span
• break-after
• break-before
• break-inside

生成コンテンツ、自動番号付け、リスト

• list-style
  • list-style-type
  • list-style-image
  • list-style-position
• counter-increment
• counter-reset
• content
• quotes

ユーザーインターフェイス

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

アニメーション

• transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
• animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

印刷

• 割愛

音声

• 割愛

CSScomb

csscomb.json

{
  …
    "sort-order": [ [
      "display"
      "flex"
      "flex-grow"
      "flex-shrink"
      "flex-basis"
      "flex-flow"
      "flex-direction"
      "flex-wrap"
      "grid"
      "grid-template"
      "grid-template-rows"
      "grid-template-columns"
      "grid-template-areas"
      "grid-auto-flow"
      "grid-auto-rows"
      "grid-auto-columns"
      "grid-gap"
      "grid-row-gap"
      "grid-column-gap"
      "grid-area"
      "grid-row"
      "grid-row-start"
      "grid-row-end"
      "grid-column"
      "grid-column-start"
      "grid-column-end"
      "align-content"
      "align-items"
      "align-self"
      "justify-content"
      "justify-items"
      "justify-self"
      "order"
      "position"
      "top"
      "right"
      "bottom"
      "left"
      "z-index"
      "transform"
      "transform-origin"
      "transform-style"
      "backface-visibility"
      "perspective"
      "float"
      "clear"
      "overflow"
      "overflow-x"
      "overflow-y"
      "visibility"
      "box-sizing"
      "table-layout"
      "caption-side"
      "empty-cells"
      "width"
      "min-width"
      "max-width"
      "height"
      "min-height"
      "max-height"
      "margin"
      "margin-top"
      "margin-right"
      "margin-bottom"
      "margin-left"
      "padding"
      "padding-top"
      "padding-right"
      "padding-bottom"
      "padding-left"
      "border-collapse"
      "border-spacing"
      "border"
      "border-width"
      "border-top-width"
      "border-right-width"
      "border-bottom-width"
      "border-left-width"
      "border-style"
      "border-top-style"
      "border-right-style"
      "border-bottom-style"
      "border-left-style"
      "border-color"
      "border-top-color"
      "border-right-color"
      "border-bottom-color"
      "border-left-color"
      "border-radius"
      "border-top-left-radius"
      "border-top-right-radius"
      "border-bottom-right-radius"
      "border-bottom-left-radius"
      "border-image"
      "border-image-source"
      "border-image-slice"
      "border-image-width"
      "border-image-outset"
      "border-image-repeat"
      "box-shadow"
      "background"
      "background-color"
      "background-image"
      "background-repeat"
      "background-attachement"
      "background-origin"
      "background-position"
      "background-size"
      "background-clip"
      "object-fit"
      "object-position"
      "opacity"
      "color"
      "font"
      "font-style"
      "font-variant"
      "font-weight"
      "font-stretch"
      "font-size"
      "line-height"
      "font-family"
      "font-feature-settings"
      "-webkit-font-smoothing"
      "text-align"
      "vertical-align"
      "text-indent"
      "text-transform"
      "text-decoration"
      "text-decoration-color"
      "text-decoration-style"
      "text-decoration-line"
      "text-overflow"
      "white-space"
      "letter-spacing"
      "word-spacing"
      "word-break"
      "word-wrap"
      "overflow-wrap"
      "text-shadow"
      "columns"
      "column-width"
      "column-count"
      "column-fill"
      "column-gap"
      "column-rule"
      "column-rule-width"
      "column-rule-style"
      "column-rule-color"
      "column-span"
      "break-after"
      "break-before"
      "break-inside"
      "list-style"
      "list-style-type"
      "list-style-image"
      "list-style-position"
      "counter-increment"
      "counter-reset"
      "content"
      "quotes"
      "pointer-events"
      "cursor"
      "outline"
      "outline-color"
      "outline-style"
      "outline-width"
      "resize"
      "transition"
      "transition-property"
      "transition-duration"
      "transition-timing-function"
      "transition-delay"
      "animation"
      "animation-name"
      "animation-duration"
      "animation-timing-function"
      "animation-delay"
      "animation-iteration-count"
      "animation-direction"
    ]]
}

参考

現在、決定的な定番ルールは存在しませんが、よく知られている主要ベンダー等のルールとして下記のようなものがあります。

• Google HTML/CSS Style Guide：
  誰が作業しても差異が生じる余地のない単純明快アルファベット順。機能を考慮していないため慣れないと記述場所を探すのに手間取る場合も。
• mozilla.org Base Styles(archive 2016/01/23)：
  CSS普及期から長い間利用されてきた。元々作られたのが2004年頃と古いため現在利用するには不足が多い。
• SMACSS Formatting Code：
  Box,Border,Background,Text,Other 機能5種に分類。比較的ゆるく導入し易いが、作業者によってブレがありそう。
• W3C CSS2 Specification：
  これ自体は記述順のルールではありませんが、W3Cが定める仕様書の記載順を反映したもの(執筆時の最新バージョンは2.2。css3はモジュール毎に追加・拡張する方式となったため、CSS3全体のリストはない)。

その他参考リンク

• CSSプロパティ記述順序
• CSSプロパティの記述順序
• CSS2 Specificationでのプロパティの出現順序
• パフォーマンス的観点から見た css プロパティの書く順
• SMACSS を使ってみた話
• CSS 2.2 Specification 日本語訳
• もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選
• CSS3プロパティ一覧（モジュール別）

以上、ありがとうございました。