【CSS代码规范】
在编写CSS代码时，遵循一定的规范至关重要，这可以提高代码的可读性、可维护性和团队协作效率。以下是一些常见的CSS代码规范：
1. **HTML基本格式**：HTML文档应遵循标准格式，包括DOCTYPE声明、语言属性（lang）、字符集（charset=UTF-8）和页面标题。
2. **注释**：使用注释来标记代码块的开始和结束，方便理解和维护，例如：`/*header start*/` 和 `/*header end*/`。
3. **CSS书写规范**
- 用两个空格缩进，不用tab键。
- 自闭合元素如`<img>`不应有斜线。
- 不要省略元素的结束标签，如`<p>`。
- 属性值应使用双引号，例如：`class="example"`。
- HTML根元素应指定lang属性，如`<html lang="en">`。
- 通知IE使用最新模式，通过`<meta http-equiv="x-UA-Compatible" content="IE=Edge,chrome=1">`。
4. **编码与类型声明**：
- 必须声明字符编码为UTF-8：`<meta charset="UTF-8">`。
- 引入CSS和JavaScript文件时不指定type，因为它们默认是`text/css`和`text/javascript`。
5. **属性顺序**：
- class -> id -> data-* -> src/for/type/href -> title/alt -> aria-*/role
6. **属性书写顺序**：
- 位置属性 -> 大小 -> 文字系列 -> 背景 -> 其他（如动画、过渡）
7. **简化与优化**：
- 缩写属性，如`margin: 0 auto;`。
- 去掉小数点前的0，如`margin: 10px;`。
- 避免使用下划线，使用短横线命名，以区别于JavaScript变量。
- 避免滥用id，尽可能使用class。
- 减少HTML标签的数量，提高效率。
- 避免使用js动态生成标签，以提高可读性和性能。
8. **值与逗号**：
- 逗号分隔的属性值后跟一个空格，如`box-shadow`。
- RGB等函数内不加逗号后的空格。
- 十六进制颜色值全小写，尽可能简写，如`#fff`。
9. **引用与合并**：
- 避免使用`@import`，因为它会增加HTTP请求次数。
- 可用多个`<link>`标签，或通过Sass/Less编译合并文件。
- 利用Rails、Jekyll等工具自动合并CSS文件。
10. **媒体查询**：
- 媒体查询应靠近相关的规则，而非集中在一个文件。
11. **浏览器前缀**：
- 使用缩减方式，保持属性值对齐，如 `-webkit-box-shadow` 和 `box-shadow`。
12. **单行与多行**：
- 单条声明语句可以放在同一行。
- 选择器分组时，每个选择器单独一行。
13. **命名约定**：
- 使用小写字母。
- 避免使用中文拼音，采用英文单词组合。
- 避免class与id重名。
14. **优先级**：
- `!important` > Style属性 > ID选择器 > 类/属性/伪类选择器 > 元素选择器 > 通配选择器。
- 优先级顺序：内联样式 > @import > `<style>`标签 > `<link>`标签。
15. **大括号和空格**：
- 规则大括号前后加空格。
- 文件末尾添加一个空白行。
16. **选择器复杂度**：
- 选择器个数尽量不超过3个，以提高性能。
17. **前缀与对齐**：
- 对于需要浏览器前缀的属性，按顺序排列并保持对齐。
遵循这些规范，可以编写出整洁、高效的CSS代码，有助于构建更好的Web项目。
