整洁样式表的 CSS 格式化最佳实践

格式良好的 CSS 是每个可维护 Web 项目的基础。混乱的样式表会拖慢调试速度、挫败团队成员的积极性，并引入难以察觉的错误。本指南涵盖了专业开发者用来保持 CSS 整洁一致的规范、工具和技巧。

为什么 CSS 格式化很重要

未格式化的 CSS 和格式化的 CSS 运行效果相同——浏览器不关心空白。但开发者关心。格式不良的样式表会导致：

合并冲突——多个开发者编辑同一文件时
重复声明——在大段文本中难以发现
新成员上手更慢
隐藏的 Bug——被不一致的缩进和嵌套所掩盖

一致的格式消除了这些问题，使代码审查更快、更高效。

缩进规范

两种主要规范是 2 个空格和 4 个空格。Tab 在 CSS 中不太常见，但一些项目仍在使用。

2 个空格缩进（最流行）

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a2e;
}

大多数 CSS 风格指南——包括 Google 和 Airbnb 的——推荐 2 个空格。这在媒体查询和预处理器嵌套中保持嵌套选择器的可读性，而不会产生过多的水平滚动。

属性排序

随机的属性顺序是 CSS 中最常见的格式错误。有两种主要策略：

1. 按类型分组（推荐）

.element {
  /* 定位 */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;

  /* 显示与盒模型 */
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;

  /* 排版 */
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;

  /* 视觉效果 */
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;

  /* 动画 */
  transition: transform 0.2s ease;
}

2. 字母顺序

一些团队按字母顺序排列属性。简单且可预测，但会分离 width 和 height 等相关属性。

分组方法在扫描规则集时提供更好的上下文。

使用我们的 CSS 格式化工具即时格式化你的 CSS。

嵌套最佳实践

CSS 嵌套（原生或通过 Sass 等预处理器）可以提高可读性，但过度使用也会产生问题。

好的做法：浅层嵌套（最多 2–3 层）

.nav {
  display: flex;
  gap: 1rem;

  & .nav__link {
    color: #555;
    text-decoration: none;

    &:hover {
      color: #0066cc;
    }
  }
}

不好的做法：深层嵌套

深层嵌套会生成冗长且高度特定的选择器，难以覆盖且影响性能。一个好的规则：如果嵌套超过 3 层，就重构结构。

自动化格式工具

手动格式化无法扩展。使用自动化工具在团队中保持一致性。

Prettier

Prettier 是最流行的代码格式化工具，原生支持 CSS、SCSS 和 Less：

npm install --save-dev prettier
npx prettier --write "**/*.css"

Stylelint

Stylelint 检测错误并在格式之外执行规范：

npm install --save-dev stylelint stylelint-config-standard
npx stylelint "**/*.css"

BEM 命名规范

BEM（块元素修饰符）是使用最广泛的 CSS 命名规范：

/* 块 */
.card { }

/* 元素（块的一部分） */
.card__header { }
.card__body { }

/* 修饰符（块或元素的变体） */
.card--featured { }

CSS 自定义属性

自定义属性（CSS 变量）从一致的格式中获益巨大：

:root {
  /* 颜色 */
  --color-primary: #0066cc;
  --color-secondary: #6c757d;

  /* 排版 */
  --font-family-base: 'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;

  /* 间距 */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}

按类别对变量进行分组，并使用一致的命名前缀。

常见格式错误

1. 缺少分号

始终在最后一个声明中包含尾部分号。这可以防止添加新属性时出现错误。

2. 不一致的间距

/* 不好 */
.header{
  color : red;
  margin:0;
}

/* 好 */
.header {
  color: red;
  margin: 0;
}

3. 单行规则

单行规则使 git diff 变得嘈杂，属性容易被遗漏。始终使用多行格式。

常见问题

CSS 应该用 Tab 还是空格？

空格是 CSS 的行业标准。大多数风格指南和格式化工具（Prettier）默认使用 2 个空格。使用团队达成一致的方式，但要保持一致性。

如何在团队中强制执行 CSS 格式？

设置带有共享配置文件的 Prettier，使用 Husky 和 lint-staged 添加 pre-commit 钩子，并配置 CI 管道拒绝未格式化的代码。

整洁样式表的 CSS 格式化最佳实践

为什么 CSS 格式化很重要

未格式化的 CSS 和格式化的 CSS 运行效果相同——浏览器不关心空白。但开发者关心。格式不良的样式表会导致：

合并冲突——多个开发者编辑同一文件时
重复声明——在大段文本中难以发现
新成员上手更慢
隐藏的 Bug——被不一致的缩进和嵌套所掩盖

一致的格式消除了这些问题，使代码审查更快、更高效。

缩进规范

两种主要规范是 2 个空格和 4 个空格。Tab 在 CSS 中不太常见，但一些项目仍在使用。

2 个空格缩进（最流行）

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a2e;
}

属性排序

随机的属性顺序是 CSS 中最常见的格式错误。有两种主要策略：

1. 按类型分组（推荐）

.element {
  /* 定位 */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;

  /* 显示与盒模型 */
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;

  /* 排版 */
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;

  /* 视觉效果 */
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;

  /* 动画 */
  transition: transform 0.2s ease;
}

2. 字母顺序

一些团队按字母顺序排列属性。简单且可预测，但会分离 width 和 height 等相关属性。

分组方法在扫描规则集时提供更好的上下文。

使用我们的 CSS 格式化工具即时格式化你的 CSS。

嵌套最佳实践

CSS 嵌套（原生或通过 Sass 等预处理器）可以提高可读性，但过度使用也会产生问题。

好的做法：浅层嵌套（最多 2–3 层）

.nav {
  display: flex;
  gap: 1rem;

  & .nav__link {
    color: #555;
    text-decoration: none;

    &:hover {
      color: #0066cc;
    }
  }
}

不好的做法：深层嵌套

深层嵌套会生成冗长且高度特定的选择器，难以覆盖且影响性能。一个好的规则：如果嵌套超过 3 层，就重构结构。

自动化格式工具

手动格式化无法扩展。使用自动化工具在团队中保持一致性。

Prettier

Prettier 是最流行的代码格式化工具，原生支持 CSS、SCSS 和 Less：

npm install --save-dev prettier
npx prettier --write "**/*.css"

Stylelint

Stylelint 检测错误并在格式之外执行规范：

npm install --save-dev stylelint stylelint-config-standard
npx stylelint "**/*.css"

BEM 命名规范

BEM（块元素修饰符）是使用最广泛的 CSS 命名规范：

/* 块 */
.card { }

/* 元素（块的一部分） */
.card__header { }
.card__body { }

/* 修饰符（块或元素的变体） */
.card--featured { }

CSS 自定义属性

自定义属性（CSS 变量）从一致的格式中获益巨大：

:root {
  /* 颜色 */
  --color-primary: #0066cc;
  --color-secondary: #6c757d;

  /* 排版 */
  --font-family-base: 'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;

  /* 间距 */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}

按类别对变量进行分组，并使用一致的命名前缀。

常见格式错误

1. 缺少分号

始终在最后一个声明中包含尾部分号。这可以防止添加新属性时出现错误。

2. 不一致的间距

/* 不好 */
.header{
  color : red;
  margin:0;
}

/* 好 */
.header {
  color: red;
  margin: 0;
}

3. 单行规则

单行规则使 git diff 变得嘈杂，属性容易被遗漏。始终使用多行格式。

常见问题

CSS 应该用 Tab 还是空格？

空格是 CSS 的行业标准。大多数风格指南和格式化工具（Prettier）默认使用 2 个空格。使用团队达成一致的方式，但要保持一致性。

如何在团队中强制执行 CSS 格式？

设置带有共享配置文件的 Prettier，使用 Husky 和 lint-staged 添加 pre-commit 钩子，并配置 CI 管道拒绝未格式化的代码。

整洁样式表的 CSS 格式化最佳实践

为什么 CSS 格式化很重要

缩进规范

2 个空格缩进（最流行）

属性排序

1. 按类型分组（推荐）

2. 字母顺序

嵌套最佳实践

好的做法：浅层嵌套（最多 2–3 层）

不好的做法：深层嵌套

自动化格式工具

Prettier

Stylelint

BEM 命名规范

CSS 自定义属性

常见格式错误

1. 缺少分号

2. 不一致的间距

3. 单行规则

常见问题

CSS 应该用 Tab 还是空格？

如何在团队中强制执行 CSS 格式？

相关资源

整洁样式表的 CSS 格式化最佳实践

为什么 CSS 格式化很重要

缩进规范

2 个空格缩进（最流行）

属性排序

1. 按类型分组（推荐）

2. 字母顺序

嵌套最佳实践

好的做法：浅层嵌套（最多 2–3 层）

不好的做法：深层嵌套

自动化格式工具

Prettier

Stylelint

BEM 命名规范

CSS 自定义属性

常见格式错误

1. 缺少分号

2. 不一致的间距

3. 单行规则

常见问题

CSS 应该用 Tab 还是空格？

如何在团队中强制执行 CSS 格式？

相关资源