302-css-best-practices

CSS最佳实践规范 (302)

规则概述

本规范定义了CSS的编码规范和最佳实践，旨在提高样式代码的可读性、可维护性和性能。

基本规范

1.1 代码格式

• 缩进使用2个空格（一个tab）
• 每个属性声明末尾都要加分号
• 选择器和声明块之间使用一个空格
• 每个属性单独一行

/* 推荐 */
.selector {
  property1: value1;
  property2: value2;
}

/* 不推荐 */
.selector{property1:value1;property2:value2;}

1.2 命名规范

• 类名使用有意义的命名，反映元素用途而非外观
• 使用连字符（-）作为类名中单词的分隔符
• 避免使用下划线（_）和驼峰式命名
• ID和类名小写

/* 推荐 */
.nav-item {
  margin-right: 10px;
}

/* 不推荐 */
.navItem {
  margin-right: 10px;
}

/* 不推荐 - 基于表现而非用途 */
.blue-button {
  background-color: blue;
}

/* 推荐 - 基于用途 */
.btn-primary {
  background-color: blue;
}

选择器规范

2.1 选择器性能

• 避免使用通配符选择器（*）
• 避免使用标签名作为选择器
• 使用直接子选择器优化性能
• 选择器嵌套层级不超过3层

/* 不推荐 - 标签选择器 */
div a span {
  color: red;
}

/* 推荐 - 使用类选择器 */
.menu .menu-link .icon {
  color: red;
}

/* 更好 - 使用直接子选择器减少层级 */
.menu > .menu-link > .icon {
  color: red;
}

/* 最佳 - 扁平化选择器 */
.menu-icon {
  color: red;
}

2.2 避免使用ID选择器

• 尽量使用类选择器，避免使用ID选择器（高特异性会导致样式难以覆盖）

/* 不推荐 */
#header {
  padding: 20px;
}

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

属性规范

3.1 属性顺序

按照特定的顺序组织属性，提高代码可读性：

1. 布局属性（position, display, float 等）
2. 盒模型属性（width, height, margin, padding 等）
3. 视觉属性（background, border, box-shadow 等）
4. 文字排版（color, font, text-align, text-transform 等）
5. 其他属性

.element {
  /* 布局属性 */
  position: absolute;
  display: block;
  float: left;
  
  /* 盒模型属性 */
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  
  /* 视觉属性 */
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  
  /* 文字排版 */
  color: #333;
  font-size: 16px;
  text-align: center;
  
  /* 其他 */
  cursor: pointer;
}

3.2 简写属性

• 尽量使用简写属性
• 省略值为0的单位
• 十六进制值使用小写字母，尽可能使用简写

/* 不推荐 */
.element {
  margin-top: 0px;
  margin-right: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
  background-color: #FFFFFF;
}

/* 推荐 */
.element {
  margin: 0 10px 20px;
  background-color: #fff;
}

组织规范

4.1 模块化CSS

• 采用模块化方式组织CSS，每个组件维护自己的样式
• 使用BEM命名约定（Block-Element-Modifier）提高可读性和可维护性