番外篇——②编码规范

本知识学习用时：2小时，总第75/10000小时

前言：编码是否规范，直接影响代码的可读性、可维护性、可交接性等。一份好的代码，可以做到：不管有多少人共同参与同一项目，都可以确保每一行代码都像是同一个人编写的。

一、CSS命名技巧

-- 语义化标签优先

-- 基于功能命名、基于内容命名、基于表现命名

-- 简略、明了、无后患

（ 看这个东西中文名字是什么，然后试着翻译成英文。）

① 常见命名1：

② 常见命名2：

③ 常见命名3：

④ 常见命名4：

二、CSS 书写规范

① tab 用两个空格表示

② css 的 : 后加个空格， { 前加个空格

③ 每条声明后都加上分号

④ 换行，而不是放到一行

⑤ 颜色用小写，用缩写, 如： #fff

⑥ 小数不用写前缀, 0.5s → .5s；0不用加单位

⑦ 尽量缩写， margin: 5px 10px 5px 10px → margin: 5px 10px

三、CSS 声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning

Box model

Typographic（印刷）

Visual （视觉）

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

例如：

后记：本篇文章探讨完也就意味着，我们把 HTML 和 CSS 的零碎基础知识点基本上掌握了。那接下来的几篇文章，理论结合实践，一起临摹“简书”的静态首页。

很有挑战，但等我们耐心的写完，我们会发现，其实所有需要的知识点和技巧，我们都是学过的。加油！

欢迎继续关注下文 ：

（19）大实战——临摹“简书”静态首页：① 页面结构+header

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）