📑

CSSプロパティの書き順

3 min read

CSSプロパティの書き順

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

書き順

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

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

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

アルファベット順

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

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

視覚順

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

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

視覚順の記載は、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

まとめ

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

Discussion

ログインするとコメントできます