CSSプロパティの書き順

CSSプロパティの書き順

皆さんはCSS(Sassも含む)のプロパティをどういう順序で記載していますか？
コードを読みやすくするためのテクニックとして、CSSのプロパティの書き順について説明していきたいと思います。

書き順

CSSのプロパティの書き順には大まかに２通りあります。(他にもあると思いますが、割愛)

• アルファベット順
• 視覚順

どちらもそれぞれのメリットとデメリットがありますので、一概にこっちが正解ということはありません。個人で開発する場合は自分が好きな方を選べば良いと思います。チーム開発の場合は、その開発ルールに従って実装していく必要があります。以下で詳しく説明します。

アルファベット順

アルファベット順は、その名の通り、プロパティをa, b, c, ... , zの順番で記載していきます。
アルファベット順の記載はGoogleがGoogle Style Guideで推奨しております。アルファベットは世界共通のため、人によって差が出ることがありません。

• メリット
  • 実装する人によって記述順番がずれない
  • 目的のプロパティを探しやすい
• デメリット
  • ぱっと見でどういうスタイルが当たっているのかが読みづらい

視覚順

視覚順とは、人間が見たものを認識する順番と同じ順番であり、人間が理解しやすい順番となります。以下の順番で記載していきます。

1. 視覚整形モデル
2. ボックスモデル
3. 背景
4. 色
5. フォント
6. 表
7. UI
8. アニメーション
9. その他

視覚順の記載は、Mozilaがmozilla.org Base Stylesで、またW3CがCSS2 Specificationで推奨しております。

• メリット
  • ぱっと見でどういうスタイルが当たっているのかが理解しやすい
• デメリット
  • 実装する人によって記述順番がずれる可能性がある

視覚整形モデル

• 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

ボックスモデル

• 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

背景

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

色

• 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

表

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

UI

• content
• quotes
• counter-increment
• counter-reset
• outline
  • outline-color
  • outline-style
  • outline-width
• cursor
• 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
  • animation-fill-mode
  • animation-play-state

その他

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

参考

https://qiita.com/mgn/items/6154ccd2e23b2e65c769　(2022/1/23追記)
記載し忘れでした。申し訳ありません。

まとめ

今回はCSSプロパティの書き順について説明しました。これを普段から意識すれば、綺麗なコードに近付くと思います。ちなみに、私は視覚順派でした。