一、代码整洁
1. 命名规范
CSS 类名的命名应该简洁清晰，能够准确描述元素的作用。避免使用无意义的名称，例如“a”、“b”等，而应该使用有意义的英文单词或单词缩写。同时，也要避免使用驼峰命名法和下划线命名法混杂使用，要保持一致性。
正确的类名命名示例：
.button {...
}.link-button {...
}input[type="text"] {...
}
2. 代码缩进
CSS 代码的缩进对代码的可读性和语义性有很大的影响。建议使用四个空格或两个空格的缩进，而不是制表符。代码缩进应该有层次感，使代码结构清晰易读。
正确的代码缩进示例：
.container {padding: 10px;
}
3. 避免冗余代码
在编写 CSS 代码时，应该避免冗余的代码。尽量将通用的样式合并在一起，避免重复定义样式。同时，也要避免不必要的样式设置，保持代码精简。
4. 注释规范
在 CSS 代码中适当添加注释，可以帮助其他开发者更好地理解代码。注释应该清晰明了，描述代码的作用和用法。同时，也要避免添加过多的注释，以免影响代码的可读性。
示例注释：
/* This is a button style */
.button {...
}/* This is a container style */
.container {...
}
二、代码规范
1. 使用属性简写
在编写 CSS 代码时，尽量使用属性简写，而不是分别设置每个属性。属性简写可以减少代码量，提高代码的可读性和维护性。
属性简写示例：
/* 使用属性简写 */
.container {margin: 10px 20px;
}/* 不使用属性简写 */
.container {margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 20px;
}
2. 统一样式格式
在 CSS 代码中，应该统一样式的格式，例如统一使用单引号或双引号、统一使用分号结尾等。这样可以提高代码的一致性和可读性。
样式格式示例：
/* 统一使用双引号 */
.button {font-family: "Arial", sans-serif;
}/* 统一使用分号结尾 */
.button {color: red;
}
3. 使用CSS预处理器
CSS 预处理器可以帮助开发者更高效地编写 CSS 代码，提高代码的可维护性。常见的 CSS 预处理器有 SASS、LESS、Stylus 等，它们提供了变量、嵌套、Mixin 等功能，让 CSS 代码更加灵活和简洁。
使用SASS示例：
$primary-color: #007bff;.button {background-color: $primary-color;
}.container {margin: 10px;
}
4. 浏览器兼容性
在编写 CSS 代码时，要注意浏览器兼容性问题。尽量避免使用浏览器特有的样式和属性，保持代码的通用性。同时，也要及时更新浏览器前缀，确保样式在各个浏览器上都能正常显示。
兼容性示例：
/* 使用兼容性前缀 */
.button {-webkit-border-radius: 5px;border-radius: 5px;
}/* 浏览器特有样式 */
@supports (-ms-accelerator:true) {.button {-ms-accelerator: "none";}
}
5. 避免使用全局样式
全局样式是指能够影响整个页面的样式，比如 body 元素或者 * 选择器。虽然在某些情况下使用全局样式会很方便，但是过度依赖全局样式会增加代码的复杂度，降低代码的可维护性。在编写 CSS 代码时，应该尽量避免使用全局样式，而是优先使用类名和 ID 来控制样式。
6. 避免使用 !important
!important 是 CSS 中的一个关键字，用来给样式声明一个高优先级。尽管 !important 可以帮助我们解决一些样式覆盖的问题，但是过度使用 !important 会增加样式的耦合性，导致代码难以维护。在编写 CSS 代码时，我们应该尽量避免使用 !important，而是优先选择更好的解决方案。
