2025/5/26
10年前に書いたこの記事ですが、今やAIや各フォーマッターがある中で人間が手動でソート順を考えるのはもはや不毛なので更新はきっともうしないです🙃
https://github.com/devmgn/css-property-order （アーカイブしました）
abc順やcss combなどプロパティの記述順序は様々だとおもいますが、自分はこれでやってます。
http://www.mozilla.org/css/base/content.css
content.css
/* Suggested order:
* display
* list-style
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
##1. 「視覚整形モデル」に関するプロパティ
- display
- flex
- flex-flow
- justify-content
- align-content
- align-items
- align-self
- order
- visibility
- opacity
- clip ※Deprecated
- clip-path
- list-style
- position
- top
- right
- bottom
- left
- z-index
- float
- clear
- transform
##2. 「ボックスモデル」に関するプロパティ
- width
- min-width
- max-width
- height
- min-height
- max-height
- margin
- padding
- overflow
- border
- box-sizing
- box-shadow
##3. 「背景」に関するプロパティ
##4. 「フォントとテキスト、色」に関するプロパティ
- color
- font
- letter-spacing
- text-decoration
- text-align
- text-indent
- text-transform
- white-space
- word-break
- word-spaciing
- word-wrap
- text-shadow
##5. 「表」に関するプロパティ
##6. 「生成内容・ユーザーインターフェース」に関するプロパティ
##7. 「アニメーション」に関するプロパティ
##8. その他の関するプロパティ