CSSのプロパティの順番わからない！！

滅茶苦茶分かります。

ということで簡単な調査をしてみました。
結論、

明確なルールは存在しない

ようです。

しかしながら、各企業の提唱する順番はあるようです。

①役割順

firefoxでお馴染みのMozillaさんが提唱しており、サイバーエージェントさんも似た形式を取っているとか。元リンクが削除されていたので、こちらから引用致しました。大まかには、

1.display
2.配置場所
3.ボックスモデル
4.背景
5.テキストなど中身関連

という順番のようです。

②アルファベット順

語る必要もないですが、アルファベット順にプロパティを並べる方法。Google社はこちらを提唱しているようです。

とはいえ面倒...

そんな怠惰なあなたにオススメが「CSScomb」。
VScodeの拡張ツール、プラグインになります。
勝手に順番変えてくれる楽ちんツール。

「gulp-CSScomb」などは、自分好みに設定もカスタマイズできるようです。