缩进与格式

缩进与格式的重要性

良好的缩进与格式是CSS代码可读性的基础。合理的缩进能清晰展示选择器和声明块的层级关系，一致的格式规范有助于团队协作和维护。下面从多个维度详细探讨CSS中的缩进与格式规范。

基础缩进规范

CSS推荐使用2个空格作为标准缩进单位。相比制表符(tab)，空格在不同编辑器和环境中显示更一致。示例：

.selector {
  property: value;
  property: value;
}

嵌套规则时，每层嵌套增加一级缩进：

.parent {
  property: value;

  .child {
    property: value;
    
    &::before {
      property: value;
    }
  }
}

媒体查询中的规则也应保持相同缩进：

@media (min-width: 768px) {
  .element {
    property: value;
  }
}

声明块格式

每个声明块应采用以下格式：

• 左花括号与选择器同一行
• 右花括号单独一行
• 冒号后保留一个空格

正确示例：

.selector {
  margin: 0;
  padding: 1em;
}

错误示例：

.selector
{
margin:0;
padding:1em }

多选择器规则

当规则包含多个选择器时，每个选择器应独占一行：

.selector1,
.selector2,
.selector3 {
  property: value;
}

属性声明的顺序

虽然属性顺序不影响功能，但保持一致的顺序能提高可读性。推荐按以下类别分组：

1. 布局属性（display, position等）
2. 盒模型属性（width, margin等）
3. 视觉属性（color, background等）
4. 文字属性（font, text-align等）
5. 其他属性

示例：

.element {
  /* 布局 */
  display: flex;
  position: relative;
  
  /* 盒模型 */
  width: 100%;
  margin: 0 auto;
  
  /* 视觉 */
  background-color: #fff;
  border: 1px solid #ddd;
  
  /* 文字 */
  font-size: 16px;
  line-height: 1.5;
}

注释格式

CSS注释应清晰标明区块和用途：

• 区块注释用于划分大段代码
• 行内注释说明特殊规则

/* ======================
   主导航样式
   ====================== */
.nav {
  /* 修复IE11的flexbox bug */
  flex: 1 0 auto;
}

媒体查询的缩进

媒体查询应保持与常规代码相同的缩进层级：

.container {
  width: 100%;

  @media (min-width: 768px) {
    width: 750px;
  }

  @media (min-width: 992px) {
    width: 970px;
  }
}

预处理器的特殊格式

使用Sass/Less时，嵌套规则需特别注意缩进：

.parent {
  color: red;

  .child {
    padding: 1em;

    &:hover {
      color: blue;
    }
  }

  &--modifier {
    border: 1px solid;
  }
}

长属性值的换行

当属性值过长时，可以在逗号后换行并缩进：

.selector {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.1)
  );
  box-shadow: 
    1px 1px 5px 0 rgba(0, 0, 0, 0.2),
    2px 2px 10px 0 rgba(0, 0, 0, 0.1);
}

供应商前缀的排列

供应商前缀应保持对齐，标准属性放在最后：

.selector {
  -webkit-transform: translateX(10px);
     -moz-transform: translateX(10px);
      -ms-transform: translateX(10px);
       -o-transform: translateX(10px);
          transform: translateX(10px);
}

代码块间的间距

相关规则组之间保留一个空行，不相关规则组之间保留两个空行：

/* 按钮基础样式 */
.btn {
  padding: 0.5em 1em;
  border-radius: 4px;
}


/* 主按钮变体 */
.btn-primary {
  background-color: blue;
  color: white;
}

.btn-secondary {
  background-color: gray;
}

文件组织结构

大型项目中CSS文件应按组件划分，文件内部按以下顺序组织：

1. 变量声明
2. 重置/基础样式
3. 布局样式
4. 组件样式
5. 工具类
6. 媒体查询

示例文件结构：

/* 变量 */
:root {
  --primary-color: #3498db;
}

/* 基础样式 */
body {
  font-family: sans-serif;
}

/* 布局 */
.container {
  max-width: 1200px;
}

/* 组件 */
.card {
  border: 1px solid #eee;
}

/* 工具类 */
.text-center {
  text-align: center;
}

/* 媒体查询 */
@media (max-width: 768px) {
  .container {
    padding: 0 1em;
  }
}

团队协作规范

团队开发时应制定并遵守统一的格式规范，可以考虑使用以下工具：

• EditorConfig文件统一基础格式
• Stylelint进行代码检查
• Prettier自动格式化

示例.editorconfig文件：

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

常见格式错误

以下是一些需要避免的常见格式问题：

1. 混合使用空格和制表符

/* 错误 */
.selector {
    property: value;  /* 制表符 */
  property: value;    /* 2空格 */
}

2. 选择器与花括号间无空格

/* 错误 */
.selector{
  property: value;
}

3. 多个规则挤在一起

/* 错误 */
.selector1 { property: value; }
.selector2 { property: value; }

4. 媒体查询嵌套不当

/* 错误 */
@media (min-width: 768px) {
.selector {
property: value;
}
}

响应式设计的格式考虑

响应式设计中，媒体查询的格式应保持清晰：

.element {
  /* 基础样式 */
  font-size: 16px;

  /* 小屏幕 */
  @media (min-width: 576px) {
    font-size: 18px;
  }

  /* 中等屏幕 */
  @media (min-width: 768px) {
    font-size: 20px;
  }
}

CSS自定义属性的格式

自定义属性(CSS变量)的声明建议使用如下格式：

:root {
  /* 颜色 */
  --color-primary: #3498db;
  --color-secondary: #e74c3c;

  /* 间距 */
  --spacing-small: 8px;
  --spacing-medium: 16px;
}

.element {
  color: var(--color-primary);
  margin: var(--spacing-medium);
}

性能相关的格式优化

虽然格式本身不影响性能，但某些格式选择有助于优化：

1. 省略0值单位

/* 推荐 */
.margin {
  margin: 0;
}

/* 不推荐 */
.margin {
  margin: 0px;
}

2. 简写属性

/* 推荐 */
.padding {
  padding: 10px 20px;
}

/* 不推荐 */
.padding {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

现代CSS的格式变化

随着CSS新特性的引入，格式也需要相应调整：

1. Grid布局的清晰格式

.container {
  display: grid;
  grid-template-columns: 
    [sidebar] 200px 
    [content] 1fr;
  grid-template-rows: 
    [header] 80px 
    [main] auto 
    [footer] 60px;
}

2. 自定义属性的计算

.element {
  --base-size: 16px;
  font-size: calc(var(--base-size) * 1.2);
}

工具自动化的利与弊

虽然自动化工具能保证格式统一，但需注意：

1. 过度格式化可能破坏有意为之的格式
2. 某些特殊格式可能需要手动调整
3. 团队应统一工具配置

示例Prettier配置：

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid"
}