### CSS (层叠样式表) 编码规范详解
#### 一、基本书写规范
**1. 重定义、伪类与自定义的顺序**
在编写 CSS 时，应遵循以下顺序：首先重定义（即覆盖默认样式），接着是伪类（如:hover），最后是自定义样式。这样可以确保样式的逻辑清晰，易于维护。
**2. 单位标识**
所有单位必须使用 `px` 作为单位标识，即便是 `0` 的单位也应写作 `0px`。这种做法符合 W3C 的标准规范，有助于保持代码的一致性和可读性。
**3. 字母小写**
所有的 CSS 属性和值均应使用小写字母书写，以避免与 HTML 或 JavaScript 中的大写字母 ID 发生冲突。
**4. 结构与样式分离**
在 HTML 页面中，仅保留文档结构相关的标签，所有的样式信息都应当被提取到独立的 CSS 文件中，并通过 `<link>` 标签外部调用。这种方法能够确保页面的可维护性，同时提高加载速度。
**5. 使用派生选择器**
尽可能使用派生选择器（例如 `#main-menu ul li`）而非频繁地使用 ID 选择器，这样可以减少全局作用域内的冲突风险。
**6. 属性书写顺序**
为了提高代码的可读性和一致性，建议按照以下顺序书写 CSS 属性：
- 显示属性（如 `display`, `list-style`, `position`, `float`, `clear`）
- 自身属性（如 `width`, `height`, `margin`, `padding`, `border`, `background`）
- 文本属性（如 `color`, `font`, `text-decoration`, `text-align`, `vertical-align`, `white-space`, `content`）
#### 二、文件命名及存放规范
**1. 全局样式**
全局样式通常包括字体大小、颜色、通用标签样式等，这些样式应统一放在名为 `global.css` 的文件中。
**2. 局部页面样式**
对于特定页面或频道的样式，建议使用如下格式命名：`private_栏目名.css`。例如，首页的局部样式可以命名为 `private_homepage.css`。所有 CSS 文件都应保存在 `/css` 目录下。
#### 三、注释写法规范
**1. 块级注释**
以块级栏目为单位进行注释，每一段之间空两行。例如：
```css
/*======导航栏目 开始======*/
#news-nav ul {
...
}
/*======导航栏目 结束=====*/
```
**2. 行内注释**
根据需要进行行内注释，不做强制要求。例如：
```css
.border:1px solid #fff; /* 定义搜索输入框边框 */
```
#### 四、常用类/ID 命名规范
**1. ID 命名规则**
ID 命名应具有描述性，并且使用小写字母，中间以 `-` 分隔。例如，顶部广告栏可以命名为 `#head-banner`。
**2. 类命名规则**
- **颜色**：直接使用颜色英文名称，如 `.red`。
- **字体大小**：使用 `font-` 加上具体的像素值，例如 `.font-14`。
- **链接样式**：使用 `link-` 加上描述性的单词，如 `link-button`。
- **其他**：部分 ID 英文命名参考，例如站点首页命名为 `homepage`、导航命名为 `nav` 等。
#### 五、Hack 书写规范
在编写兼容不同浏览器的 CSS 时，可以使用 Hack 技术。通常的顺序是先针对 Firefox，然后 IE7，最后 IE6。例如：
```css
test: 791px !important; /* FF Hack */
test: 785px !important; /* IE7 Hack */
test: 777px; /* IE7 以下 */
```
#### 六、其他书写注意事项
**1. 鼠标手势**
使用 `pointer` 而不是 `hand` 来表示鼠标悬停时的手势。
**2. 代码缩写**
尽可能地使用缩写形式，比如将 `.white{#ffffff}` 缩写为 `.white{#fff}`。
以上就是关于 CSS 编码规范的主要内容，遵循这些规范可以帮助开发者编写出更加清晰、一致和易于维护的代码。
