css书写代码要求规范

### CSS书写代码要求规范 #### 一、引言 CSS（Cascading Style Sheets），即层叠样式表，是用于描述HTML文档外观和格式的一种样式语言。随着网站复杂度的提高，良好的CSS代码规范变得尤为重要。它不仅能提高代码的可读性和可维护性，还能促进团队成员之间的协作效率。以下将详细介绍CSS书写代码的要求规范。 #### 二、代码风格 ##### 2.1 文件 - **UTF-8 编码**：[建议] 使用无BOM的UTF-8编码。这是因为UTF-8编码具备更广泛的兼容性，而BOM可能会在文件处理过程中引起不必要的干扰。 ##### 2.2 缩进 - **4个空格缩进**：[强制] 使用4个空格作为一个缩进层级，禁止使用2个空格或Tab键。这有助于保持代码的一致性和清晰度。 ```css .selector { margin: 0; padding: 0; } ``` ##### 2.3 空格 - **选择器与{**：[强制] 选择器与大括号`{`之间必须包含空格。 ```css .selector { } ``` - **属性名与:**：[强制] 属性名与冒号`:`之间不允许包含空格，而冒号与属性值之间必须包含空格。 ```css margin: 0; ``` - **列表型属性值**：[强制] 列表型属性值书写在单行时，逗号`,`后必须跟一个空格。 ```css font-family: Arial, sans-serif; ``` ##### 2.4 行长度 - **不超过120个字符**：[强制] 每行代码不得超过120个字符，除非单行不可分割。例如，URL过长的情况可以考虑换行。 ```css background: transparent url(aVeryVeryVeryLongUrlIsPlacedHere) no-repeat 0 0; ``` - **按逻辑分组**：对于超长的样式，建议在样式值的空格处或逗号后换行，并尽量按逻辑分组。 ```css background: transparent url(aVeryVeryVeryLongUrlIsPlacedHere) no-repeat 0 0; ``` ##### 2.5 选择器 - **多选择器独占一行**：[强制] 当一个规则包含多个选择器时，每个选择器声明必须独占一行。 ```css .post, .page, .comment { line-height: 1.5; } ``` - **特殊选择器空格**：[强制] `>`、`+`、`~`选择器的两边各保留一个空格。 ```css main > nav { padding: 10px; } label + input { margin-left: 5px; } input:checked ~ button { background-color: #69C; } ``` - **属性选择器值使用双引号**：[强制] 属性选择器中的值必须使用双引号包围。 ```css article[character="juliet"] { voice-family: "VivienLeigh", victoria, female; } ``` ##### 2.6 属性 - **属性独占一行**：[强制] 属性定义必须另起一行。 ```css .selector { margin: 0; padding: 0; } ``` - **属性定义后加分号**：[强制] 属性定义后必须以分号结尾。 ```css .selector { margin: 0; } ``` #### 三、通用准则 ##### 3.1 选择器 - **避免冗余的选择器**：[强制] 如无必要，不得为ID、class选择器添加类型选择器进行限定。这样可以减少选择器的复杂度，提高性能。 ```css #error, .danger-message { font-color: #c00; } ``` - **选择器嵌套层级**：[建议] 选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。 ```css #usernameinput {} .comment.avatar {} ``` 以上规范不仅适用于原生CSS，同时也适用于使用各种CSS预处理器（如Less、Sass、Stylus等）的项目。遵循这些规范可以帮助开发者编写出更易于理解、维护和扩展的CSS代码。