CSSプロパティの記述順｜視覚順とアルファベット順

CSSを書く中で、プロパティの記述順について気になった経験が一度はあるのではないでしょうか？
CSSプロパティの記述順に明確なルールはありませんが、個人やチームでルールを決めておくと、コード管理や可読性が向上します。
この記事では、一般的によく使われる代表的な記述例を紹介します。

視覚順（内容順）

「レイアウト」→「スタイル」→「演出」というように、人間が認識しやすい順序でプロパティを記述する方法です。

コード例：

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 15px;
  background: #FFFFFF;
}

header {

display: flex;

justify-content: space-between;

align-items: center;

position: fixed;

top: 0;

left: 0;

width: 100%;

padding: 20px 15px;

background: #FFFFFF;

}

視覚順（内容順）を採用している制作者が多い印象ですが、opacity や transform などを、上位の「表示や配置」に関するプロパティと捉える制作者もいれば、下位の「エフェクト・アニメーション」と捉える制作者もいる、と人によって扱いが揺れることがあります。

メリット
- 関連するプロパティが近くにまとまるため、全体像を把握しやすい
デメリット
- 記述する人によって順序が異なる場合がある

アルファベット順（ABC順）

プロパティ名を a から z の順に記述する方法です。

コード例：

header {
  align-items: center;
  background: #FFFFFF;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 20px 15px;
  position: fixed;
  top: 0;
  width: 100%;
}