css 屬性書寫順序推薦

轉自本身的 Github/Wizard67

根據 MDN 中 CSS參考 概括整理。

summary

┌── 佈局定位
    |   ├── 元素定位
    |   |   └── position...
    |   └── 元素浮動
    |       └── float...
    |—— 盒子模型
    |   ├── 盒子類型
    |   |   ├── display
    |   |   ├── 彈性盒子
    |   |   |   └── flex...
    |   |   ├── 網格系統
    |   |   |   └── grid...
    |   |   ├── 表格模型
    |   |   |   └── table-layout...
    |   |   ├── 列表盒子
    |   |   |   └── list-style...
    |   |   └── 標註模型
    |   |       └── ruby-align...
    |   ├── 盒子屬性
    |   |   ├── box-sizing
    |   |   ├── 盒子尺寸
    |   |   |   ├── width...
    |   |   |   ├── height...
    |   |   |   ├── padding...
    |   |   |   ├── border...
    |   |   |   ├── outline...
    |   |   |   └── margin...
    |   |   └── 盒子樣式
    |   |       ├── color
    |   |       ├── background...
    |   |       ├── background-blend-mode...
    |   |       ├── clip-path
    |   |       ├── mask...
    |   |       ├── filter
    |   |       ├── box-shadow
    |   |       ├── opacity
    |   |       └── visibility
    |   └── 盒子內容
    |       ├── 溢出處理
    |       |   └── overflow...
    |       ├── 垂直對齊
    |       |   └── vertical-align
    |       ├── 內容分列
    |       |   └── columns...
    |       ├── 文本渲染
    |       |   ├── 排版模式
    |       |   |   └── writing-mode...
    |       |   ├── 文本樣式
    |       |   |   ├── text-rendering
    |       |   |   ├── font-feature-settings...
    |       |   |   └── font...
    |       |   ├── 文本控制
    |       |   |   ├── text-overflow
    |       |   |   ├── white-space
    |       |   |   ├── overflow-wrap...
    |       |   |   ├── word-break...
    |       |   |   ├── text-align...
    |       |   |   ├── font-synthesis
    |       |   |   ├── font-size-adjust
    |       |   |   ├── letter-spacing...
    |       |   |   └── text-transform...
    |       |   └── 文本裝飾
    |       |       ├── quotes
    |       |       ├── tab-size
    |       |       ├── text-indent
    |       |       ├── text-emphasis...
    |       |       ├── text-decoration...
    |       |       └── text-shadow
    |       └── 圖片元素
    |           ├── image-rendering...
    |           └── shape-image-threshold...
    |—— 盒子變形
    |   ├── transform-style...
    |   ├── perspective...
    |   └── backface-visibility
    |—— 動態效果
    |   ├── 過渡動畫
    |   |   ├── transition...
    |   |   └── animation...
    |   └── 滾動效果
    |       └── scroll-behavior...
    └── 其餘屬性
        ├── 用戶行爲
        |   ├── resize
        |   ├── cursorresize...
        |   ├── touch-action
        |   ├── caret-color
        |   └── ime-mode
        ├── 元素屬性
        |   └── object-fit
        |   ├── object-position
        |   ├── content
        |   ├── counter-reset...
        |   ├── will-change
        |   ├── pointer-events
        |   ├── z-index
        |   └── all
        ├── 定義變量
        |   └── --*
        └── 頁面打印
            ├── page-break-before...
            └── widows

詳細的屬性和參數請見 note-css-order