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 页面结构

css名	表示规则
main	主体
container	容器
header	头
content	内容
footer	尾
sidebar	侧边栏
nav	导航
column	栏
wrapper	页面外围控制整体布局容器

4.2 导航

css名	表示规则
nav	导航
subnav	子导航
topnav	顶部导航
sidebar	侧边导航
menu	菜单
submenu	子菜单
title	一般指栏目标题
summary	摘要

4.3 功能

css名	表示规则
shop	功能区
loginbar	登录条
logo	标志
banner	广告位
hot	热点
news	新闻
like	赞
download	下载
search	搜索
menu	菜单
submenu	子菜单
friendlink	友情链接
scroll	滚动
tags	标签
article	文章
list	列表
msg	指需要传达的信息
info	承载信息的简讯
copyright	版权
tips	提示
title	标题
joinus	加入我们
guide	指南
service	服务
register	注册
status	状态
vote	投票
partner	合作
btn	按钮
current	当前
icon	图标
note	注释

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

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

5. 常见css文件命名表

css名	表示规则
base.css	基础样式表
common.css	公用
themes.css	主题
reset.css	重设
font.css	文字
layout.css	版面
module.css	模块
column.css	专栏
...	等等