CSSプロパティ記述順序

2021/5/26 追記
筆者は昔手動でこの順に揃えてたけど今はstylelintのstylelint-orderを利用してソートしていたりするので、あくまで参考にしていただけると

2020/10/15 追記
https://github.com/devmgn/css-property-order
こちらへ

---

abc順やcss combなどプロパティの記述順序は様々だとおもいますが、自分はこれでやってます。

http://www.mozilla.org/css/base/content.css

content.css

/* 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
 *
 */

1. 「視覚整形モデル」に関するプロパティ

• display
• flex
  • flex-grow
  • flex-shrink
  • flex-basis
• flex-flow
  • flex-direction
  • flex-wrap
• justify-content
• align-content
• align-items
• align-self
• order
• visibility
• opacity
• clip ※Deprecated
• clip-path
• list-style
  • list-style-type
  • list-style-position
  • list-style-image
• position
• top
• right
• bottom
• left
• z-index
• float
• clear
• transform

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

• 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
• overflow
  • overflow-x
  • overflow-y
• 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-image
    • border-image-source
    • border-image-slice
    • border-image-width
    • border-image-outset
    • border-image-repeat
  • border-radius
    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius
• box-sizing
• box-shadow

3. 「背景」に関するプロパティ

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

4. 「フォントとテキスト、色」に関するプロパティ

• color
• font
  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • font-size
  • line-height
  • font-family
• letter-spacing
• text-decoration
  • text-decoration-color
  • text-decoration-style
  • text-decoration-line
• text-align
• text-indent
• text-transform
• white-space
• word-break
• word-spaciing
• word-wrap
• text-shadow

5. 「表」に関するプロパティ

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

6. 「生成内容・ユーザーインターフェース」に関するプロパティ

• content
• quotes
• counter-increment
• counter-reset
• outline
  • outline-color
  • outline-style
  • outline-width
• cursor
• resize

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

• 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
  • animation-fill-mode
  • animation-play-state

8. その他の関するプロパティ

• unicode-bidi
• direction
• page-break-before
• page-break-after
• page-break-inside
• widows
• orphans