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

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

視覚順（内容順）

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

 

コード例：

表示や配置 → ボックス構造 → 背景・色 → フォント・テキスト → アニメーション → その他、というような順番で指定していきます。

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

 

メリット

• ・関連するプロパティが近くにまとまるため、全体像を把握しやすい

 

デメリット

• ・記述する人によって順序が異なる場合がある

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

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

 

コード例：

 

メリット

• ・誰が書いても同じ順序になるためコードの統一性が高い
• ・目的のプロパティを探しやすい

 

デメリット

• ・関連性のあるプロパティが離れるため、全体像を把握しづらい

参考になるサイト

以下のリンク先では、実際に現場で使えそうなプロパティの記載順をまとめてくれています。

• Qiita：CSSプロパティ記述順序
• Qiita：CSS Property Order

まとめ

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