缩进使用2个空格

在CSS/SCSS开发中，缩进是代码可读性的重要组成部分。2个空格的缩进规范已成为现代前端开发的行业标准，相比于传统的4个空格或制表符(tab)，它具有以下优势：

更紧凑的代码布局，减少水平滚动
在嵌套较深的SCSS结构中仍能保持清晰
与大多数现代编辑器的默认设置一致
被主流CSS框架和库(如Bootstrap、Foundation等)采用

正确的2个空格缩进示例

基础CSS示例

css 复制代码

/* 正确：2个空格缩进 */
.selector {
  color: #333;
  font-size: 16px;
}

.selector .child {
  padding: 10px;
  margin: 0 auto;
}

SCSS嵌套示例

scss 复制代码

// 正确：2个空格缩进
.nav {
  display: flex;
  
  &__item {
    padding: 0 15px;
    
    &:hover {
      color: blue;
    }
  }
  
  &--dark {
    background: #222;
  }
}

媒体查询示例

scss 复制代码

// 正确：2个空格缩进
.container {
  width: 100%;
  
  @media (min-width: 768px) {
    width: 750px;
  }
  
  @media (min-width: 992px) {
    width: 970px;
  }
}

错误的缩进示例

使用制表符(tab)缩进

css 复制代码

/* 错误：使用制表符缩进 */
.selector {
	color: #333;
	font-size: 16px;
}

问题：不同编辑器对制表符的显示宽度可能不同，导致代码在不同环境下显示不一致。

使用4个空格缩进

scss 复制代码

// 错误：4个空格缩进
.selector {
    color: #333;
    
    &:hover {
        color: blue;
    }
}

问题：在深度嵌套的SCSS中，4个空格会导致代码向右偏移过多，增加水平滚动。

混合使用空格和制表符

css 复制代码

/* 错误：混合缩进 */
.selector {
  color: #333;
    font-size: 16px;  /* 这里用了4个空格 */
}

问题：混合缩进会导致代码混乱，难以维护。

不正确的媒体查询缩进

scss 复制代码

// 错误：媒体查询缩进不正确
.container {
width: 100%;

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

问题：缺少缩进导致代码结构不清晰，难以区分嵌套层级。

如何配置编辑器

大多数现代代码编辑器都支持自动缩进设置：

VS Code:
- 设置中搜索 "tab size"
- 勾选 "Insert Spaces"
- 设置 "Tab Size" 为 2
Sublime Text:
- 菜单 View > Indentation > Convert Indentation to Spaces
- 设置 Tab Width 为 2
Atom:
- Settings > Editor > Tab Length: 2
- 勾选 Soft Tabs

团队协作中的缩进规范

在项目根目录添加 .editorconfig 文件：

ini 复制代码

root = true

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

在SCSS项目中，可以使用Stylelint等工具强制缩进规范：

json 复制代码

{
  "rules": {
    "indentation": [2, {
      "baseIndentLevel": 1
    }]
  }
}

结论

坚持使用2个空格缩进规范可以：

提高代码一致性
增强团队协作效率
保持代码整洁易读
符合现代前端开发标准

通过配置编辑器和使用lint工具，可以轻松地在项目中实施这一规范，避免缩进不一致带来的问题。