1. 分号

• 每个属性声明后必须加分号。即使是最后一个属性也要加，以保持一致性和避免潜在的错误。

2. 命名规范

1. 不使用 id 选择器：避免使用 id 选择器，因为它们具有更高的优先级，可能导致样式难以重用和维护。

2. 使用有意义的名词进行命名：选择描述性强的类名，使其易于理解。例如，使用 .button-primary 而不是 .btn1。

3. 小写字母与下划线：所有单词使用小写字母，多个单词时使用下划线（_）分隔，确保一致性和可读性。

3. 属性声明顺序

原则

• 整体到局部：从大到小的布局属性优先声明，例如 display、position 等。

• 外部到内部：从外部边距到内部边距，先声明 margin，再声明 padding。

• 重要属性优先：将重要的视觉属性（如 color 和 background-color）放在前面。

示例

4. 其他规范

使用 Prettier 格式化工具

• 格式自动化：自动格式化代码，减少手动调整的需要。

• 4 个空格缩进：每个缩进级别使用 4 个空格，保持代码整洁。

• 全部单引号：使用单引号而非双引号，以保持一致性。

• 属性 : 后有空格：在属性名和属性值之间添加空格，提高可读性。

• 颜色值全部小写：确保颜色值使用小写字母，避免大小写不一致。

• 小数点前的 0 自动添加：例如，使用 0.5 而不是 .5。

Prettier 配置示例

5. 选择器的使用

• 避免过度使用通配符选择器：如 ，这会影响性能。

• 使用组合选择器：如 .parent .child，以提高选择器的特异性。

• 避免过度嵌套：选择器嵌套层级应控制在 3 层以内，以提高可读性。

6. 注释

• 使用注释：在代码中添加注释以解释复杂的样式或特定选择器的目的。

• 分块注释：使用分块注释来组织代码，例如：

7. 响应式设计

• 使用媒体查询：确保样式在不同设备上良好显示，使用适当的媒体查询。

• 灵活单位：优先使用相对单位（如 em、rem、%）而非绝对单位（如 px），以提高响应能力。

8. 参考链接

• 百度 CSS 规范指南

• 腾讯 CSS 规范指南

• Google CSS 规范指南