本文推荐 PC 端阅读~本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！复制代码
css_17复制代码
1. 列举 CSS 编码规范？2. 编码规范的作用是什么？列举 5 条以上编码规范。复制代码
前言： 编码是否规范，直接影响代码的可读性、可维护性、可交接性等。一份好的代码，可以做到：不管有多少人共同参与同一项目，都可以确保每一行代码都像是同一个人编写的。
1 CSS命名技巧
- 语义化标签优先
- 基于功能命名、基于内容命名、基于表现命名
- 简略、明了、无后患
（? 看这个东西中文名字是什么，然后试着翻译成英文。）
1.1 常见命名 1
| 名称 | 用途 |
|---|---|
| .wrap 或 .wrapper | 用于外侧包裹 |
| .container 或 .ct | 包裹容器 |
| .header | 用于头部 |
| .body | 页面 body |
| .footer | 页面尾部 |
| .aside 、.sidebar | 用于侧边栏 |
| .content | 和 header footer 对应，用于主要内容 |
| .navigation | 导航元素 |
| .pagination | 分页 |
1.2 常见命名 2
| 名称 | 用途 |
|---|---|
| .tabs > .tab | tab 切换 |
| .breadcrumbs | 导航列表、面包屑 |
| .dropdown | 下拉菜单 |
| .article | 文章 |
| .main | 用于主体 |
| .thumbnail | 头像，小图像 |
| .media | 媒体资源 |
| .panel | 面板 |
| .tooltip | 鼠标放置上去的提示 |
| .popup | 鼠标点击弹出的提示 |
1.3 常见命名 3
| 名称 | 用途 |
|---|---|
| .button 、.btn | 按钮 |
| .ad | 广告 |
| .subnav | 二级导航 |
| .menu | 菜单 |
| .tag | 标签 |
| .message 或者 .notice | 提示消息 |
| .summary | 摘要 |
| .logo | logo |
| .search | 搜索框 |
| .login | 登录 |
1.4 常见命名 4
| 名称 | 用途 |
|---|---|
| .register | 注册 |
| .username | 用户名 |
| .password | 密码 |
| .banner | 广告条 |
| .copyright | 版权 |
| .modal 或者 .dialog | 弹窗 |
2 CSS 书写规范
- tab 用两个空格表示；
- css 的
:后加个空格，{前加个空格； - 每条声明后都加上分号；
- 换行，而不是放到一行；
- 颜色用小写，用缩写，如： #fff；
- 小数不用写前缀，
0.5s→.5s；0 不用加单位； - 尽量缩写，
margin: 5px 10px 5px 10px;→margin: 5px 10px;。
3 CSS 声明顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：
- Positioning
- Box model
- Typography（印刷）
- Visual （视觉）
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
?例如：.declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* Visual */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* Misc */ opacity: 1;}复制代码 后记： 本篇文章常看常新，规范化的编码对自己、对他人都是百利而无一害的。
加油！