css书写规范

序

在前端领域，CSS(层叠样式表:Cascading Style Sheets)是绕不过的话题。

“样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

虽然CSS初学者易于上手，且趣味性十足，但是作为一项工程而言，还是需要有一定规范约束的。这里简单介绍下关于css的一些规范。

1. 书写顺序

一般而言css都有一定的书写顺序，而不是想起来什么属性写说明属性。一般css的书写顺序为：

1. 位置（z-index position top display float ...）
2. 大小边距（width padding margin ...）
3. 文字（font line-height letter-spacing color ...）
4. 背景（background border ...）
5. 其他（animation transtion ...）

例如：

/* 错误示例 */
.test {
    font-size: 24px;
    background: #f6f6f6;
    color: red;
    padding: 10px 5px 12px;
    display: flex;
    z-index: 999;
}

/* 规范示例 */
.test {
    z-index: 999;
    display: flex;
    padding: 10px 5px 12px;
    color: red;
    font-size: 24px;
    background: #f6f6f6;
}

2. 注意缩写

缩写，就是属性名及属性值，能缩写则缩写。例如属性名、属性值、颜色、去掉小数点前的0等：

/* 错误示例 */
.test{
    padding-top: 0.9rem;
    padding-left: 1.2rem;
    padding-bottom: 0.8rem;
    padding-right: 1.2rem;
    font-family: serif;
    font-size: 100%;
    line-height: 1.2;
    background-color: #ff0000;
}

/* 规范示例 */
.test{
    padding: .9rem 1.2rem .8rem;
    font: 100%/1.2 serif;
    background-color: #f00;
}

3. 命名规范

命名规范两个注意点：

1. 不要乱使用“id” 这是因为id在js中具有唯一性，防止多次使用而对脚本编写带来影响。而class类则可重复使用。另外id与class权重不同，优先级不同，id得按需使用。
2. 长命名尽量使用中横线“-”来做短词分割，如main-cont 用短横线而不用下划线分割有两点：1. 对浏览器解析更加兼容；2. js变量一般使用下划线命名，为做出良好区分，所以使用短横线。

4 常见css命名规则表

一般可用id来命名

4.1 页面结构

4.2 导航

4.3 功能

注意，用id选择器命名时，需要注意以下几点：

• 使用英文
• 小写
• 不添加连接符，如-或_
• 除大众广知的（如：msg、btn）尽量不缩写

5. 常见css文件命名表