17370845950

CSS属性顺序无强制规范，但团队协作推荐“从外到内、从结构到表现”分组排序，如定位布局→盒模型→排版文字→视觉表现→交互状态，并用stylelint+postcss-sorting自动化维护。

CSS 属性顺序有没有强制规范？

没有浏览器或 CSS 标准强制要求属性顺序，display 写在最后和写在最前，渲染结果完全一样。但团队协作中，一致的顺序能显著降低视觉扫描成本——你不用在 margin 和 padding 之间来回跳着找 background-color。

主流可落地的排序策略：按盒模型 + 渲染流分组

推荐采用“从外到内、从结构到表现”的逻辑分组，而非字母序（z-index 排最前这种反直觉方式容易出错）。主流方案如 Airbnb CSS Guide 和 CSS Remedy 都倾向以下分组（每组内不强求顺序，但组间保持固定）：

• 定位与布局：position、top、right、bottom、left、z-index、display、float、clear
• 盒模型：box-sizing、width、height、max-width、max-height、min-width、min-height、margin、padding、border、outline
• 排版与文字：font、font-size、line-height、color、text-align、vertical-align、white-space
• 视觉表现：background、background-color、opacity、filter、box-shadow、transform
• 交互与状态：cursor、user-select、pointer-events、transition、animation

自动化比手动更可靠：用 stylelint + postcss-sorting

靠人眼维持顺序极易遗漏，尤其改样式时只动一两个属性。用工具固化规则才是可持续方案：

• 安装插件：

  npm install --save-dev stylelint postcss-sorting

• 在 .stylelintrc.js 中启用排序规则：

  module.exports = {
    plugins: ['stylelint-order'],
    rules: {
      'order/order': [
        'custom-properties',
        'declarations'
      ],
      'order/properties-order': [
        // 按上面分组顺序写具体属性名
        'position', 'top', 'right', 'bottom', 'left', 'z-index', 'display',
        'box-sizing', 'width', 'height', 'margin', 'padding', 'border',
        'font', 'font-size', 'line-height', 'color', 'text-align',
        'background', 'opacity', 'box-shadow', 'transform',
        'cursor', 'transition', 'animation'
      ]
    }
  };

• 编辑器保存时自动排序（VS Code 需装 Stylelint 插件并开启 editor.codeActionsOnSave）

容易被忽略的三个细节

即使用了工具，这些点仍常导致意外：

• @media 嵌套内部的属性顺序，需单独配置 postcss-sorting 的 insideAtRule 选项，否则媒体查询里属性不会被排序
• background 是简写属性，若同时写了 background 和 background-color，后者会被前者覆盖——排序不能掩盖逻辑冲突
• CSS Custom Properties（--my-var）默认排最前，但若混用 var(--my-var) 在其他属性值中，工具无法感知依赖关系，得靠人工检查

顺序本身不解决 bug，但它让 bug 更容易被发现。比如 display: none 被写在 transform 后面，人眼扫过去会立刻意识到“这个 transform 其实没机会执行”。