CSS 样式书写规范（推荐）

在编写 CSS 样式时，遵循一致的书写规范可以提高代码的可读性和可维护性。以下是一些推荐的 CSS 样式书写规范：

1. 缩进和空格

• 使用两个空格作为缩进的单位，而不是制表符。
• 在选择器、属性和值之间使用一个空格，以增加可读性。

示例：

/* 不推荐 */
h1{
font-size:24px;
color:red;
}

/* 推荐 */
h1 {
  font-size: 24px;
  color: red;
}

2. 选择器书写

• 使用小写字母来书写选择器，以增加一致性。
• 使用连字符（-）作为多个单词之间的分隔符，而不是下划线或驼峰命名法。
• 避免使用标签选择器，尽量使用类选择器或 ID 选择器。

示例：

/* 不推荐 */
DIV.container {
  background-color: #f1f1f1;
}

/* 推荐 */
div.container {
  background-color: #f1f1f1;
}

3. 属性书写

• 在属性名和冒号之间使用一个空格，增加可读性。
• 在冒号和属性值之间使用一个空格，增加可读性。
• 使用双引号包裹属性值，除非属性值本身包含双引号。

示例：

/* 不推荐 */
h1{
  font-size:24px;
  color:red;
}

/* 推荐 */
h1 {
  font-size: 24px;
  color: red;
}

4. 注释

• 使用注释来解释代码的作用和意图，增加代码的可读性。
• 使用 /* */ 来包裹注释内容。

示例：

/* 不推荐 */
h1 {
  font-size: 24px; /* 设置标题字体大小 */
}

/* 推荐 */
h1 {
  font-size: 24px; /* 设置标题字体大小 */
}

5. 嵌套和层级

• 避免过度嵌套，保持选择器的简洁性。
• 避免使用过多的层级，以减少样式的复杂性。

示例：

/* 不推荐 */
div.container ul li a {
  color: blue;
}

/* 推荐 */
.container a {
  color: blue;
}

以上是一些推荐的 CSS 样式书写规范，遵循这些规范可以提高代码的可读性和可维护性。当然，这只是一些建议，你可以根据自己的团队或项目的需要进行适当的调整。