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