css书写规范
2021-01-15 本文已影响0人
流眸Tel
序
在前端领域，CSS(层叠样式表:Cascading Style Sheets)是绕不过的话题。
样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的
.css文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
虽然CSS初学者易于上手，且趣味性十足，但是作为一项工程而言，还是需要有一定规范约束的。这里简单介绍下关于css的一些规范。
1. 书写顺序
一般而言css都有一定的书写顺序，而不是想起来什么属性写说明属性。一般css的书写顺序为：
- 位置（z-index position top display float ...）
- 大小边距（width padding margin ...）
- 文字（font line-height letter-spacing color ...）
- 背景（background border ...）
- 其他（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. 命名规范
命名规范两个注意点：
- 不要乱使用“
id”
这是因为id在js中具有唯一性，防止多次使用而对脚本编写带来影响。而class类则可重复使用。另外id与class权重不同，优先级不同，id得按需使用。 - 长命名尽量使用中横线“
-”来做短词分割，如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 | 专栏 |
| ... | 等等 |
