CSS属性书写顺序规范 - 极速工具箱

在编写CSS时，属性的排列顺序往往被忽视。然而，一套合理的属性书写顺序规范，可以显著提升代码的可读性和可维护性。当多个开发者协作时，统一的属性顺序规范能让代码风格保持一致，降低认知负担。本文将详细介绍CSS属性的推荐书写顺序及其背后的逻辑。

一、为什么要规范属性顺序？

1.1 现实中的混乱

在团队项目中，CSS属性的排列顺序常常是这样的：

/* 开发者A的风格：随机排列 */
.button {
  background: blue;
  display: inline-block;
  margin: 10px;
  color: white;
  position: relative;
  font-size: 14px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

/* 开发者B的风格：字母排序 */
.button {
  background: blue;
  border: none;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  margin: 10px;
  padding: 8px 16px;
  position: relative;
}

/* 开发者C的风格：按自己理解的重要性排序 */
.button {
  color: white;
  background: blue;
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
  position: relative;
}

1.2 统一顺序的好处

好处	说明
提高可读性	开发者可以快速找到特定类别的属性
降低认知负担	不需要记忆每个人不同的排列习惯
减少合并冲突	统一的顺序减少了 Git 合并冲突的可能性
便于 Code Review	审查者可以更快速地检查属性是否合理
工具自动化	可以使用 Stylelint 等工具自动排序属性
符合思维模型	按照从外到内、从结构到视觉的逻辑排列

二、推荐的属性分组顺序

根据业界广泛认可的最佳实践，CSS属性应该按照以下五大类进行分组排列：

2.1 分组概览

顺序	分组名称	包含属性	优先级
1	定位属性	position, top, right, bottom, left, z-index	最高
2	布局属性	display, flex, grid, float, overflow	高
3	盒模型属性	width, height, margin, padding, border	中
4	排版属性	font, line-height, letter-spacing, color	中低
5	视觉属性	background, box-shadow, transform, opacity	低
6	动画与过渡	transition, animation, will-change	最低
7	其他属性	cursor, pointer-events, user-select 等	最低

2.2 详细属性分类表

第一组：定位属性（Positioning）

/* 定位相关属性放在最前面 */
.element {
  position: absolute;    /* 定位方式 */
  top: 0;                /* 位置偏移 */
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;          /* 层级控制 */
  float: left;           /* 浮动 */
  clear: both;           /* 清除浮动 */
}

定位属性放在最前面的原因：定位属性决定了元素在页面中的位置，这是最基础的布局决策，其他属性（如尺寸、间距）都依赖于定位结果。

第二组：布局属性（Layout）

/* 布局相关属性 */
.element {
  display: flex;                 /* 显示模式 */
  flex-direction: column;        /* Flex 方向 */
  flex-wrap: wrap;               /* Flex 换行 */
  justify-content: center;       /* 主轴对齐 */
  align-items: center;           /* 交叉轴对齐 */
  gap: 16px;                     /* 间距 */

  /* Grid 布局 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;

  /* 其他布局属性 */
  overflow: hidden;
  visibility: visible;
}

第三组：盒模型属性（Box Model）

/* 盒模型属性 */
.element {
  /* 尺寸 */
  width: 100%;
  max-width: 1200px;
  min-width: 320px;
  height: auto;
  max-height: 600px;
  min-height: 100px;

  /* 外边距 */
  margin: 0;
  margin-top: 20px;

  /* 内边距 */
  padding: 16px;
  padding-left: 24px;

  /* 边框 */
  border: 1px solid #ddd;
  border-radius: 8px;

  /* 盒模型 */
  box-sizing: border-box;
}

第四组：排版属性（Typography）

/* 排版相关属性 */
.element {
  /* 字体 */
  font: normal 16px/1.5 'PingFang SC', sans-serif;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;

  /* 行高 */
  line-height: 1.5;

  /* 文本 */
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  letter-spacing: 0.5px;
  word-spacing: normal;
  word-break: normal;
  word-wrap: break-word;
  white-space: normal;

  /* 颜色 */
  color: #333;
}

第五组：视觉属性（Visual）

/* 视觉相关属性 */
.element {
  /* 背景 */
  background: #fff;
  background-color: #fff;
  background-image: url('bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 阴影 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

  /* 边框视觉效果 */
  outline: none;
  outline-offset: 0;

  /* 透明度 */
  opacity: 1;

  /* 滤镜 */
  filter: blur(0);

  /* 变换 */
  transform: translateX(0);
  transform-origin: center center;

  /* 混合模式 */
  mix-blend-mode: normal;
}

第六组：动画与过渡（Animation & Transition）

/* 动画和过渡属性 */
.element {
  /* 过渡 */
  transition: all 0.3s ease;
  transition-property: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;

  /* 动画 */
  animation: fadeIn 0.5s ease forwards;
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;

  /* 性能提示 */
  will-change: transform;
}

第七组：其他属性（Miscellaneous）

/* 其他属性 */
.element {
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  content: '';
  resize: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

三、完整示例

3.1 一个完整的组件样式

/* 卡片组件 */
.card {
  /* 1. 定位 */
  position: relative;
  z-index: 1;

  /* 2. 布局 */
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* 3. 盒模型 */
  width: 100%;
  max-width: 400px;
  margin: 16px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-sizing: border-box;

  /* 4. 排版 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #4a5568;

  /* 5. 视觉 */
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* 6. 过渡 */
  transition: box-shadow 0.3s ease, transform 0.3s ease;

  /* 7. 其他 */
  cursor: pointer;
}

.card:hover {
  /* 5. 视觉 */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* 6. 变换 */
  transform: translateY(-4px);
}

.card__title {
  /* 4. 排版 */
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #1a202c;
  margin-bottom: 8px;
}

.card__description {
  /* 4. 排版 */
  font-size: 14px;
  line-height: 1.6;
  color: #718096;

  /* 3. 盒模型 */
  margin-bottom: 16px;
}

.card__action {
  /* 1. 定位 */
  position: relative;

  /* 2. 布局 */
  display: inline-flex;
  align-items: center;
  align-self: flex-start;

  /* 3. 盒模型 */
  padding: 8px 20px;
  border: none;
  border-radius: 6px;

  /* 4. 排版 */
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;

  /* 5. 视觉 */
  background-color: #4299e1;

  /* 6. 过渡 */
  transition: background-color 0.2s ease;

  /* 7. 其他 */
  cursor: pointer;
}

.card__action:hover {
  /* 5. 视觉 */
  background-color: #3182ce;
}

3.2 Stylelint 自动排序配置

使用 stylelint-order 插件可以自动按分组排序：

{
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": null,
    "order/properties-order": [
      [
        {
          "emptyLineBefore": "always",
          "properties": [
            "position",
            "top",
            "right",
            "bottom",
            "left",
            "z-index"
          ]
        },
        {
          "emptyLineBefore": "always",
          "properties": [
            "display",
            "flex",
            "flex-direction",
            "flex-wrap",
            "flex-flow",
            "flex-grow",
            "flex-shrink",
            "flex-basis",
            "justify-content",
            "align-items",
            "align-content",
            "align-self",
            "order",
            "grid",
            "grid-template",
            "grid-column",
            "grid-row",
            "gap",
            "float",
            "clear",
            "overflow",
            "visibility"
          ]
        },
        {
          "emptyLineBefore": "always",
          "properties": [
            "width",
            "min-width",
            "max-width",
            "height",
            "min-height",
            "max-height",
            "margin",
            "margin-top",
            "margin-right",
            "margin-bottom",
            "margin-left",
            "padding",
            "padding-top",
            "padding-right",
            "padding-bottom",
            "padding-left",
            "border",
            "border-width",
            "border-style",
            "border-color",
            "border-radius",
            "box-sizing"
          ]
        },
        {
          "emptyLineBefore": "always",
          "properties": [
            "font",
            "font-family",
            "font-size",
            "font-weight",
            "font-style",
            "line-height",
            "text-align",
            "text-decoration",
            "text-transform",
            "letter-spacing",
            "white-space",
            "word-break",
            "word-wrap",
            "color"
          ]
        },
        {
          "emptyLineBefore": "always",
          "properties": [
            "background",
            "background-color",
            "background-image",
            "background-size",
            "background-position",
            "background-repeat",
            "box-shadow",
            "outline",
            "opacity",
            "filter",
            "transform"
          ]
        },
        {
          "emptyLineBefore": "always",
          "properties": [
            "transition",
            "animation",
            "will-change"
          ]
        },
        {
          "emptyLineBefore": "always",
          "properties": [
            "cursor",
            "pointer-events",
            "user-select",
            "content"
          ]
        }
      ],
      {
        "unspecified": "bottomAlphabetical",
        "emptyLineBeforeUnspecified": "always"
      }
    ]
  }
}

四、属性顺序规范的对比

4.1 不同规范对比

规范名称	排序逻辑	分组数量	工具支持	适用场景
分组排序（本文推荐）	按语义分组	7组	Stylelint	大多数项目
字母排序	按字母顺序	无分组	Stylelint	偏好确定性排序
Concentric CSS	由外到内	无分组	插件	关注盒模型
Vue 推荐顺序	按 Vue 风格指南	自定义	ESLint	Vue.js 项目

4.2 字母排序 vs 分组排序

/* 字母排序 */
.element {
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  color: #333;
  display: flex;
  font-size: 16px;
  height: 100px;
  justify-content: center;
  margin: 20px;
  padding: 16px;
  position: relative;
  width: 200px;
}

/* 分组排序 */
.element {
  /* 定位 */
  position: relative;

  /* 布局 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 盒模型 */
  width: 200px;
  height: 100px;
  margin: 20px;
  padding: 16px;
  border: 1px solid #ddd;

  /* 排版 */
  font-size: 16px;
  color: #333;

  /* 视觉 */
  background: #fff;
}

分组排序的优势：当你需要修改布局相关属性时，它们都在一起，不需要在字母序列中跳跃查找。

五、团队协作中的实践

5.1 将规范纳入项目配置

// .stylelintrc.json
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order"
  ],
  "rules": {
    "order/properties-order": "recess-order"
  }
}

5.2 在 package.json 中配置脚本

{
  "scripts": {
    "lint:css": "stylelint 'src/**/*.css' --fix",
    "lint:css:check": "stylelint 'src/**/*.css'",
    "format": "prettier --write 'src/**/*.css'",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.css": [
      "stylelint --fix",
      "prettier --write"
    ]
  }
}

总结

CSS属性书写顺序规范的核心理念是按照从结构到视觉*、从*外到内的逻辑进行排列。推荐的七大分组顺序为：

定位属性 - 决定元素位置
布局属性 - 决定内容排列方式
盒模型属性 - 决定尺寸和间距
排版属性 - 决定文字表现
视觉属性 - 决定视觉效果
动画过渡 - 决定动态表现
其他属性 - 交互和杂项

通过 Stylelint 等工具将规范自动化，可以让团队在不增加额外认知负担的情况下保持一致的代码风格。