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全体のリストはない)。

その他参考リンク

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