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

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

視覚順（内容順）

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

コード例：

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

•  メリット
• デメリット

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

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

 コード例：

• メリット

• デメリット

参考になるサイト

実際に現場で使えそうなプロパティの記載順がまとめられています。

まとめ

個人的には、関連するプロパティが近くにまとまる「視覚順（内容順）」がしっくりきますが、CSSプロパティの記述順には絶対的な正解はありません。
プロパティの記述順について気になった経験が一度でもある人は、参考にしてみてください。