Css 书写顺序

合理的属性顺序应遵循 [ 布局 -> 盒模型 -> 视觉 -> 交互 -> 其他 ] 的逻辑，核心目标是让代码更易读、易维护。

实际开发中可根据项目需求微调，但保持团队一致性是关键。

布局相关

display (显示类型) 、 visibility (可见性) 、position (定位方式)、top/right/bottom/left (定位偏移) 、 float (浮动) 、 clear (清除浮动) 、overflow (溢出处理) 、 z-index (层叠顺序)、clip (裁剪)。

盒模型

box-sizing (盒模型计算方式)、width/min-width/max-width (宽度)、 height/min-height/max-height (高度) 、 margin (外边距) 、 padding (内边距) 、 border (边框) 、outline (轮廓) 。

视觉样式

color (文本颜色)、background (背景，含 background-color/background-image 等)、font (字体合写)、font-size (字体大小)、font-family (字体系列)、line-height (行高)、text-align (文本对齐)、text-indent (首行缩进)、letter-spacing (字母间距)、white-space (空白处理)。

交互与动画

cursor (鼠标指针)、opacity (透明度) 、transition (过渡)、animation (动画)、 transform( 变换，如旋转、缩放)。

其他(特殊/低频)

filter (滤镜) 、clip-path (裁剪路径)、backdrop-filter (背景滤镜) 、will-change(优化提示)、touch-action(触摸行为) 、scroll-behavior (滚动行为) 。