前端手册

1 . 目 录 致谢 介绍 CSS编码规范 HTML编码规范 HEAD JavaScript编码规范 其他规范 开发工具的使用 Chrome Dev Tool使用教程 Github与git的使用 好书推荐篇 非编程类书籍推荐 免费的计算机编程类中文书籍 学习指导&资源篇 Web Developer 成长路线图 前端StuQ技能图谱 前端资源汇总 JavaScript资源大全 前端优化 性能优化篇一 性能优化资源列表(en) 其他干货 HTTP API 设计指南 完美判断IE各版本 本文档使用 书栈(BookStack.CN) 构建 - 1 - 

2 .致谢 致谢 当前文档 《前端手册》 由 进击的皇虫 使用 书栈(BookStack.CN) 进行构建，生成于 2018-03-28。 书栈(BookStack.CN) 仅提供文档编写、整理、归类等功能，以及对文档内容的生成和导出工 具。 文档内容由网友们编写和整理，书栈(BookStack.CN) 难以确认文档内容知识点是否错漏。如 果您在阅读文档获取知识的时候，发现文档内容有不恰当的地方，请向我们反馈，让我们共同携手， 将知识准确、高效且有效地传递给每一个人。 同时，如果您在日常生活、工作和学习中遇到有价值有营养的知识文档，欢迎分享到 书栈 (BookStack.CN) ，为知识的传承献上您的一份力量！ 如果当前文档生成时间太久，请到 书栈(BookStack.CN) 获取最新的文档，以跟上知识更新换 代的步伐。 文档地址：http://www.bookstack.cn/books/front-end-manual 书栈官网：http://www.bookstack.cn 书栈开源：https://github.com/TruthHun 分享，让知识传承更久远！ 感谢知识的创造者，感谢知识的分享者，也感谢每一位阅读到此处的 读者，因为我们都将成为知识的传承者。 本文档使用 书栈(BookStack.CN) 构建 - 2 - 

3 .介绍 介绍 front-end-manual front-end-manual 前端手册 目录 CSS编码规范 HTML编码规范 JavaScript编码规范 其他规范 开发工具的使用 好书推荐篇 学习指导&资源篇 前端优化 其他干货 更多知识点见issues 目录不全，请阅读在线版 下载离线版：pdf、epub、mobi 文档会不定时更新，可以 Watch 或 Star 本文挡——Github，更欢迎您加入编辑维护 声明：编码规范参考[百度前端开发规范]修改，或整理于互联网，如有侵权请联系 giscafer@outlook.com。 整理人列表：contibutors 欢迎关注微信公众号：giscafer 本文档使用 书栈(BookStack.CN) 构建 - 3 - 

4 .介绍 giscafer.com · GitHub @giscafer · Weibo @Nickbing Lao 本文档使用 书栈(BookStack.CN) 构建 - 4 - 

5 .CSS编码规范 CSS编码规范 CSS编码规范 1、前言 2、代码风格 2.1 文件 2.2 缩进 2.3 空格 [强制] 选择器 与 { 之间必须包含空格。 [强制] 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须 包含空格。 [强制] 列表型属性值 书写在单行时， , 后必须跟一个空格。 2.4 行长度 [强制] 每行不得超过 120 个字符，除非单行不可分割。 [建议] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分 组。 2.5 选择器 [强制] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。 [强制] > 、 + 、 ~ 选择器的两边各保留一个空格。 [强制] 属性选择器中的值必须用双引号包围。 2.6 属性 [强制] 属性定义必须另起一行。 [强制] 属性定义后必须以分号结尾。 3 通用 3.1 选择器 [强制] 如无必要，不得为 id 、 class 选择器添加类型选择器进行限定。 [建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。 3.2 属性缩写 [建议] 在可以使用缩写的情况下，尽量使用属性缩写。 [建议] 使用 border / margin / padding 等缩写时，应注意隐含值对实际 数值的影响，确实需要设置多个方向的值时才使用缩写。 3.3 属性书写顺序 [建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的 可读性。 3.4 清除浮动 [建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix 。尽量不使用增加空标签的方式。 3.5 !important [建议] 尽量不使用 !important 声明。 本文档使用 书栈(BookStack.CN) 构建 - 5 - 

6 .CSS编码规范 [建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。 3.6 z-index [建议] 将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管 理。 [建议] 在可控环境下，期望显示在最上层的元素， z-index 指定为 999999 。 [建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 !important ，将 z-index 指定为 2147483647 。 4 值与单位 4.1 文本 [强制] 文本内容必须用双引号包围。 4.2 数值 [强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0 。 4.3 url() [强制] url() 函数中的路径不加引号。 [建议] url() 函数中的绝对路径可省去协议名。 4.4 长度 [强制] 长度为 0 时须省略单位。 (也只有长度单位可省) 4.5 颜色 [强制] RGB颜色值必须使用十六进制记号形式 #rrggbb 。不允许使用 rgb() 。 [强制] 颜色值可以缩写时，必须使用缩写形式。 [强制] 颜色值不允许使用命名色值。 [建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大 小写一致。 4.6 2D 位置 [强制] 必须同时给出水平和垂直方向的位置。 5 文本编排 5.1 字体族 [强制] font-family 属性中的字体族名称应使用字体的英文 Family Name ，其中 如有空格，须放置在引号中。 [强制] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/ 更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一 个通用字体族( serif / sans-serif )。 [强制] font-family 不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一。 5.2 字号 [强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px 。 5.3 字体风格 [建议] 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style 。其他平台也应慎用。 5.4 字重 [强制] font-weight 属性必须使用数值方式描述。 本文档使用 书栈(BookStack.CN) 构建 - 6 - 

7 .CSS编码规范 5.5 行高 [建议] line-height 在定义文本段落时，应使用数值。 6 变换与动画 [强制] 使用 transition 时应指定 transition-property 。 [建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。 7 响应式 [强制] Media Query 不得单独编排，必须与相关的规则一起定义。 [强制] Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。 [建议] 尽可能给出在高分辨率设备 (Retina) 下效果更佳的样式。 8 兼容性 8.1 属性前缀 [强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。 8.2 Hack [建议] 需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。 [建议] 尽量使用 选择器 hack 处理兼容性，而非 属性 hack 。 [建议] 尽量使用简单的 属性 hack 。 8.3 Expression [强制] 禁止使用CSS表达式 Expression 。 CSS编码规范 1、前言 CSS指层叠样式表 (Cascading Style Sheets)，是网页样式语言。任何网页都离不开CSS样式， 作为前端开发工程师也必须要掌握的编程语言，使得在开发过程中，你能随意的更改样式和做页面UI 调整，增强界面体验等。 CSS语言掌握情况测试，基础教程 本编码规范目的是使开发人员编写的CSS代码风格保持一致，容易被理解和维护。 2、代码风格 2.1 文件 [强制] 自定义CSS 文件 请单独创建文件 解释：单独创建文件有利于维护，同时方便ui的样式替换和升级。 [建议] CSS 文件使用无 BOM 的 UTF-8 编码 解释：UTF-8 编码具有更广泛的适应性。BOM在使用程序或工具处理文件时可能造成不必要的干扰。 本文档使用 书栈(BookStack.CN) 构建 - 7 - 

8 .CSS编码规范 2.2 缩进 [建议] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。 示例： 1. .map { 2. margin: 0; 3. padding: 0; 4. } 2.3 空格 [强制] 选择器 与 { 之间必须包含空格。 示例： 1. .selector { 2. } [强制] 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之 间必须包含空格。 本文档使用 书栈(BookStack.CN) 构建 - 8 - 

9 .CSS编码规范 示例： 1. margin: 0; [强制] 列表型属性值 书写在单行时， , 后必须跟一个空格。 示例： 1. font-family: Arial, sans-serif; 2.4 行长度 [强制] 每行不得超过 120 个字符，除非单行不可分割。 解释： 常见不可分割的场景为URL超长。 [建议] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按 逻辑分组。 示例： 1. /* 不同属性值按逻辑分组 */ 2. background: 3. transparent url(aVeryVeryVeryLongUrlIsPlacedHere) 4. no-repeat 0 0; 5. 6. /* 可重复多次的属性，每次重复一行 */ 7. background-image: 8. url(aVeryVeryVeryLongUrlIsPlacedHere) 9. url(anotherVeryVeryVeryLongUrlIsPlacedHere); 10. 11. /* 类似函数的属性值可以根据函数调用的缩进进行 */ 12. background-image: -webkit-gradient( 13. linear, 14. left bottom, 15. left top, 16. color-stop(0.04, rgb(88,94,124)), 17. color-stop(0.52, rgb(115,123,162)) 18. ); 本文档使用 书栈(BookStack.CN) 构建 - 9 - 

10 .CSS编码规范 2.5 选择器 [强制] 当一个 rule 包含多个 selector 时，每个选择器声明必 须独占一行。 示例： 1. /* good */ 2. .post, 3. .page, 4. .comment { 5. line-height: 1.5; 6. } 7. 8. /* bad */ 9. .post, .page, .comment { 10. line-height: 1.5; 11. } [强制] > 、 + 、 ~ 选择器的两边各保留一个空格。 示例： 1. /* good */ 2. main > nav { 3. padding: 10px; 4. } 5. 6. label + input { 7. margin-left: 5px; 8. } 9. 10. input:checked ~ button { 11. background-color: #69C; 12. } 13. 14. /* bad */ 15. main>nav { 16. padding: 10px; 17. } 18. 19. label+input { 20. margin-left: 5px; 21. } 22. 本文档使用 书栈(BookStack.CN) 构建 - 10 - 

11 .CSS编码规范 23. input:checked~button { 24. background-color: #69C; 25. } [强制] 属性选择器中的值必须用双引号包围。 解释： 不允许使用单引号，不允许不使用引号。 示例： 1. /* good */ 2. article[character="juliet"] { 3. voice-family: "Vivien Leigh", victoria, female; 4. } 5. 6. /* bad */ 7. article[character='juliet'] { 8. voice-family: "Vivien Leigh", victoria, female; 9. } 2.6 属性 [强制] 属性定义必须另起一行。 示例： 1. /* good */ 2. .selector { 3. margin: 0; 4. padding: 0; 5. } 6. 7. /* bad */ 8. .selector { margin: 0; padding: 0; } [强制] 属性定义后必须以分号结尾。 示例： 1. /* good */ 2. .selector { 3. margin: 0; 本文档使用 书栈(BookStack.CN) 构建 - 11 - 

12 .CSS编码规范 4. } 5. 6. /* bad */ 7. .selector { 8. margin: 0 9. } 说明：以上2.2——2.6 的要求可以通过IDE美化CSS达到。推荐 sublime 或者 webstrom 3 通用 3.1 选择器 [强制] 如无必要，不得为 id 、 class 选择器添加类型选择器进行限 定。 解释： 在性能和维护性上，都有一定的影响。 示例： 1. /* good */ 2. #error, 3. .danger-message { 4. font-color: #c00; 5. } 6. 7. /* bad */ 8. dialog#error, 9. p.danger-message { 10. font-color: #c00; 11. } [建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽 可能精确。 示例： 1. /* good */ 2. #username input {} 3. .comment .avatar {} 4. 本文档使用 书栈(BookStack.CN) 构建 - 12 - 

13 .CSS编码规范 5. /* bad */ 6. .page .header .login #username input {} 7. .comment div * {} 3.2 属性缩写 [建议] 在可以使用缩写的情况下，尽量使用属性缩写。 示例： 1. /* good */ 2. .post { 3. font: 12px/1.5 arial, sans-serif; 4. } 5. 6. /* bad */ 7. .post { 8. font-family: arial, sans-serif; 9. font-size: 12px; 10. line-height: 1.5; 11. } [建议] 使用 border / margin / padding 等缩写时，应注意隐含值对 实际数值的影响，确实需要设置多个方向的值时才使用缩写。 解释： border / margin / padding 等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设 定。如某些方向需要继承其他声明的值，则应该分开设置。 示例： 1. /* centering <article class="page"> horizontally and highlight featured ones */ 2. article { 3. margin: 5px; 4. border: 1px solid #999; 5. } 6. 7. /* good */ 8. .page { 9. margin-right: auto; 10. margin-left: auto; 11. } 12. 13. .featured { 本文档使用 书栈(BookStack.CN) 构建 - 13 - 

14 .CSS编码规范 14. border-color: #69c; 15. } 16. 17. /* bad */ 18. .page { 19. margin: 5px auto; /* introducing redundancy */ 20. } 21. 22. .featured { 23. border: 1px solid #69c; /* introducing redundancy */ 24. } 3.3 属性书写顺序 [建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并 以 Formatting Model（布局方式、位置） > Box Model（尺 寸） > Typographic（文本相关） > Visual（视觉效果） 的顺 序书写，以提高代码的可读性。 解释： Formatting Model 相关属性包括： position / top / right / bottom / left / float / display / overflow 等 Box Model 相关属性包括： border / margin / padding / width / height 等 Typographic 相关属性包括： font / line-height / text-align / word-wrap 等 Visual 相关属性包括： background / color / transition / list-style 等 另外，如果包含 content 属性，应放在最前面。 示例： 1. .sidebar { 2. /* formatting model: positioning schemes / offsets / z-indexes / display / ... */ 3. position: absolute; 4. top: 50px; 5. left: 0; 6. overflow-x: hidden; 7. 8. /* box model: sizes / margins / paddings / borders / ... */ 9. width: 200px; 10. padding: 5px; 11. border: 1px solid #ddd; 12. 13. /* typographic: font / aligns / text styles / ... */ 本文档使用 书栈(BookStack.CN) 构建 - 14 - 

15 .CSS编码规范 14. font-size: 14px; 15. line-height: 20px; 16. 17. /* visual: colors / shadows / gradients / ... */ 18. background: #f5f5f5; 19. color: #333; 20. -webkit-transition: color 1s; 21. -moz-transition: color 1s; 22. transition: color 1s; 23. } 3.4 清除浮动 [建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设 置 clear 或触发 BFC 的方式进行 clearfix 。尽量不使用增加空标签的 方式。 解释： 触发 BFC 的方式很多，常见的有： float 非 none position 非 static overflow 非 visible 如希望使用更小副作用的清除浮动方法，参见 A new micro clearfix hack 一文。 另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。 3.5 !important [建议] 尽量不使用 !important 声明。 [建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联 和 !important 定义样式。 解释： 必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。 通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样 例。 3.6 z-index 本文档使用 书栈(BookStack.CN) 构建 - 15 - 

16 .CSS编码规范 [建议] 将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关 系进行管理。 解释： 同层的多个元素，如多个由用户输入触发的 Dialog，在该层级内使用相同的 z-index 或递增 z-index 。 建议每层包含100个 z-index 来容纳足够的元素，如果每层元素较多，可以调整这个数值。 [建议] 在可控环境下，期望显示在最上层的元素， z-index 指定为 999999 。 解释： 可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部 第三方的产品引用。 不建议取值为 2147483647 。以便于自身产品线被其他产品线引用时，当遇到层级覆盖冲突的情况， 留出向上调整的空间。 [建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 !important ，将 z-index 指定为 2147483647 。 解释： 第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式 定义覆盖，需要采用此做法。 4 值与单位 4.1 文本 [强制] 文本内容必须用双引号包围。 解释： 文本类型的内容可能在选择器、属性值等内容中。 示例： 1. /* good */ 2. html[lang|="zh"] q:before { 本文档使用 书栈(BookStack.CN) 构建 - 16 - 

17 .CSS编码规范 3. font-family: "Microsoft YaHei", sans-serif; 4. content: "“"; 5. } 6. 7. html[lang|="zh"] q:after { 8. font-family: "Microsoft YaHei", sans-serif; 9. content: "”"; 10. } 11. 12. /* bad */ 13. html[lang|=zh] q:before { 14. font-family: 'Microsoft YaHei', sans-serif; 15. content: '“'; 16. } 17. 18. html[lang|=zh] q:after { 19. font-family: "Microsoft YaHei", sans-serif; 20. content: "”"; 21. } 4.2 数值 [强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0 。 示例： 1. /* good */ 2. panel { 3. opacity: .8; 4. } 5. 6. /* bad */ 7. panel { 8. opacity: 0.8; 9. } 4.3 url() [强制] url() 函数中的路径不加引号。 示例： 1. body { 2. background: url(bg.png); 本文档使用 书栈(BookStack.CN) 构建 - 17 - 

18 .CSS编码规范 3. } [建议] url() 函数中的绝对路径可省去协议名。 示例： 1. body { 2. background: url(//baidu.com/img/bg.png) no-repeat 0 0; 3. } 4.4 长度 [强制] 长度为 0 时须省略单位。 (也只有长度单位可省) 示例： 1. /* good */ 2. body { 3. padding: 0 5px; 4. } 5. 6. /* bad */ 7. body { 8. padding: 0px 5px; 9. } 4.5 颜色 [强制] RGB颜色值必须使用十六进制记号形式 #rrggbb 。不允许使用 rgb() 。 解释： 带有alpha的颜色信息可以使用 rgba() 。使用 rgba() 时每个逗号后必须保留一个空格。 示例： 1. /* good */ 2. .success { 3. box-shadow: 0 0 2px rgba(0, 128, 0, .3); 4. border-color: #008000; 5. } 6. 本文档使用 书栈(BookStack.CN) 构建 - 18 - 

19 .CSS编码规范 7. /* bad */ 8. .success { 9. box-shadow: 0 0 2px rgba(0,128,0,.3); 10. border-color: rgb(0, 128, 0); 11. } [强制] 颜色值可以缩写时，必须使用缩写形式。 示例： 1. /* good */ 2. .success { 3. background-color: #aca; 4. } 5. 6. /* bad */ 7. .success { 8. background-color: #aaccaa; 9. } [强制] 颜色值不允许使用命名色值。 示例： 1. /* good */ 2. .success { 3. color: #90ee90; 4. } 5. 6. /* bad */ 7. .success { 8. color: lightgreen; 9. } [建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项 目内保持大小写一致。 示例： 1. /* good */ 2. .success { 3. background-color: #aca; 4. color: #90ee90; 5. } 本文档使用 书栈(BookStack.CN) 构建 - 19 - 

20 .CSS编码规范 6. 7. /* good */ 8. .success { 9. background-color: #ACA; 10. color: #90EE90; 11. } 12. 13. /* bad */ 14. .success { 15. background-color: #ACA; 16. color: #90ee90; 17. } 4.6 2D 位置 [强制] 必须同时给出水平和垂直方向的位置。 解释： 2D 位置初始值为 0% 0% ，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避 免理解上的困扰，应同时给出两个方向的值。background-position属性值的定义 示例： 1. /* good */ 2. body { 3. background-position: center top; /* 50% 0% */ 4. } 5. 6. /* bad */ 7. body { 8. background-position: top; /* 50% 0% */ 9. } 5 文本编排 5.1 字体族 [强制] font-family 属性中的字体族名称应使用字体的英文 Family Name ， 其中如有空格，须放置在引号中。 解释： 本文档使用 书栈(BookStack.CN) 构建 - 20 - 

21 .CSS编码规范 所谓英文 Family Name，为字体文件的一个元数据，常见名称如下： 字体 操作系统 Family Name 宋体 (中易宋体) Windows SimSun 黑体 (中易黑体) Windows SimHei 微软雅黑 Windows Microsoft YaHei 微软正黑 Windows Microsoft JhengHei 华文黑体 Mac/iOS STHeiti 冬青黑体 Mac/iOS Hiragino Sans GB 文泉驿正黑 Linux WenQuanYi Zen Hei 文泉驿微米黑 Linux WenQuanYi Micro Hei 示例： 1. h1 { 2. font-family: "Microsoft YaHei"; 3. } [强制] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序 编写，最后必须指定一个通用字体族( serif / sans-serif )。 解释： 更详细说明可参考本文。 示例： 1. /* Display according to platform */ 2. .article { 3. font-family: Arial, sans-serif; 4. } 5. 6. /* Specific for most platforms */ 7. h1 { 8. font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; 9. } [强制] font-family 不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一。 本文档使用 书栈(BookStack.CN) 构建 - 21 - 

22 .CSS编码规范 示例： 1. /* good */ 2. body { 3. font-family: Arial, sans-serif; 4. } 5. 6. h1 { 7. font-family: Arial, "Microsoft YaHei", sans-serif; 8. } 9. 10. /* bad */ 11. body { 12. font-family: arial, sans-serif; 13. } 14. 15. h1 { 16. font-family: Arial, "Microsoft YaHei", sans-serif; 17. } 5.2 字号 [强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px 。 解释： 由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。 5.3 字体风格 [建议] 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style 。其他平台也应慎用。 解释： 由于中文字体没有 italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效 果差，造成阅读困难。 5.4 字重 [强制] font-weight 属性必须使用数值方式描述。 本文档使用 书栈(BookStack.CN) 构建 - 22 - 

23 .CSS编码规范 解释： CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold 。 浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的 Regular 字 重， >=700 时匹配 Bold 字重。 但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表)，故使用数值描述增加了灵活 性，也更简短。 示例： 1. /* good */ 2. h1 { 3. font-weight: 700; 4. } 5. 6. /* bad */ 7. h1 { 8. font-weight: bold; 9. } 5.5 行高 [建议] line-height 在定义文本段落时，应使用数值。 解释： 将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同 字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要 设置 line-height 。 当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。 示例： 1. .container { 2. line-height: 1.5; 3. } 6 变换与动画 本文档使用 书栈(BookStack.CN) 构建 - 23 - 

24 .CSS编码规范 [强制] 使用 transition 时应指定 transition-property 。 示例： 1. /* good */ 2. .box { 3. transition: color 1s, border-color 1s; 4. } 5. 6. /* bad */ 7. .box { 8. transition: all 1s; 9. } [建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。 解释： 见本文，在可能的情况下应选择这样四种变换： transform: translate(npx, npx); transform: scale(n); transform: rotate(ndeg); opacity: 0..1; 典型的，可以使用 translate 来代替 left 作为动画属性。 示例： 1. /* good */ 2. .box { 3. transition: transform 1s; 4. } 5. .box:hover { 6. transform: translate(20px); /* move right for 20px */ 7. } 8. 9. /* bad */ 10. .box { 11. left: 0; 12. transition: left 1s; 13. } 14. .box:hover { 15. left: 20px; /* move right for 20px */ 16. } 本文档使用 书栈(BookStack.CN) 构建 - 24 - 

25 .CSS编码规范 7 响应式 [强制] Media Query 不得单独编排，必须与相关的规则一起定义。 示例： 1. /* Good */ 2. /* header styles */ 3. @media (...) { 4. /* header styles */ 5. } 6. 7. /* main styles */ 8. @media (...) { 9. /* main styles */ 10. } 11. 12. /* footer styles */ 13. @media (...) { 14. /* footer styles */ 15. } 16. 17. 18. /* Bad */ 19. /* header styles */ 20. /* main styles */ 21. /* footer styles */ 22. 23. @media (...) { 24. /* header styles */ 25. /* main styles */ 26. /* footer styles */ 27. } [强制] Media Query 如果有多个逗号分隔的条件时，应将每个条件放在 单独一行中。 示例： 1. @media 2. (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ 3. (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ 4. (min-resolution: 2dppx), /* The standard way */ 5. (min-resolution: 192dpi) { /* dppx fallback */ 6. /* Retina-specific stuff here */ 本文档使用 书栈(BookStack.CN) 构建 - 25 - 

26 .CSS编码规范 7. } [建议] 尽可能给出在高分辨率设备 (Retina) 下效果更佳的样式。 8 兼容性 8.1 属性前缀 [强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。 解释： 标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。 示例： 1. .box { 2. -webkit-box-sizing: border-box; 3. -moz-box-sizing: border-box; 4. box-sizing: border-box; 5. } 8.2 Hack [建议] 需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。 解释： 如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段 解决问题。通常 hack 会导致维护成本的增加。 [建议] 尽量使用 选择器 hack 处理兼容性，而非 属性 hack 。 解释： 尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问 题。 示例： 1. /* IE 7 */ 2. *:first-child + html #header { 本文档使用 书栈(BookStack.CN) 构建 - 26 - 

27 .CSS编码规范 3. margin-top: 3px; 4. padding: 5px; 5. } 6. 7. /* IE 6 */ 8. * html #header { 9. margin-top: 5px; 10. padding: 4px; 11. } [建议] 尽量使用简单的 属性 hack 。 示例： 1. .box { 2. _display: inline; /* fix double margin */ 3. float: left; 4. margin-left: 20px; 5. } 6. 7. .container { 8. overflow: hidden; 9. *zoom: 1; /* triggering hasLayout */ 10. } 8.3 Expression [强制] 禁止使用CSS表达式 Expression 。 解释：原因见前端优化篇章 本文档使用 书栈(BookStack.CN) 构建 - 27 - 

28 .HTML编码规范 HTML编码规范 HTML编码规范 1 前言 2 代码风格 2.1 缩进与换行 [强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。 [建议] 每行不得超过 120 个字符。 2.2 命名 [强制] class 必须单词全字母小写，单词间以 - 分隔。 [强制] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命 名。 [强制] 元素 id 必须保证页面唯一。 [建议] id 建议单词全字母小写，单词间以 - 分隔。同项目必须保持风格一 致。 [建议] id 、 class 命名，在避免冲突并描述清楚的前提下尽可能短。 [强制] 禁止为了 hook 脚本 ，创建无样式信息的 class 。 [强制] 同一页面，应避免使用相同的 name 与 id 。 2.3 标签 [强制] 标签名必须使用小写字母。 [强制] 对于无需自闭合的标签，不允许自闭合。 [强制] 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。 [强制] 标签使用必须符合标签嵌套规则。 [建议] HTML 标签的使用应该遵循标签的语义。 [建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。 [建议] 标签的使用应尽量简洁，减少不必要的标签。 2.4 属性 [强制] 属性名必须使用小写字母。 [强制] 属性值必须用双引号包围。 [建议] 布尔类型的属性，建议不添加属性值。 [建议] 自定义属性建议以 xxx- 为前缀，推荐使用 data- 。 3 通用 3.1 DOCTYPE [强制] 使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE 。 [建议] 启用 IE Edge 模式。 [建议] 在 html 标签上设置正确的 lang 属性。 3.2 编码 [强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必 须是 head 的第一个直接子元素。 本文档使用 书栈(BookStack.CN) 构建 - 28 - 

29 .HTML编码规范 [建议] HTML 文件使用无 BOM 的 UTF-8 编码。 3.3 CSS 和 JavaScript 引入 [强制] 引入 CSS 时必须指明 rel="stylesheet" 。 [建议] 引入 CSS 和 JavaScript 时无须指明 type 属性。 [建议] 展现定义放置于外部 CSS 中，行为定义放置于外部 JavaScript 中。 [建议] 在 head 中引入页面需要的所有 CSS 资源。 [建议] JavaScript 应当放在页面末尾，或采用异步加载。 [建议] 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。 4 head 4.1 title [强制] 页面必须包含 title 标签声明标题。 [强制] title 必须作为 head 的直接子元素，并紧随 charset 声明之后。 4.2 favicon [强制] 保证 favicon 可访问。 4.3 viewport [建议] 若页面欲对移动设备友好，需指定页面的 viewport 。 5 图片 [强制] 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src 。 [建议] 避免为 img 添加不必要的 title 属性。 [建议] 为重要图片添加 alt 属性。 [建议] 添加 width 和 height 属性，以避免页面抖动。 [建议] 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图 实现。 6 表单 6.1 控件标题 [强制] 有文本标题的控件必须使用 label 标签将其与其标题相关联。 6.2 按钮 [强制] 使用 button 元素时必须指明 type 属性值。 [建议] 尽量不要使用按钮类元素的 name 属性。 6.3 可访问性 (A11Y) [建议] 负责主要功能的按钮在 DOM 中的顺序应靠前。 [建议] 当使用 JavaScript 进行表单提交时，如果条件允许，应使原生提交功能正 常工作。 [建议] 在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性。 7 多媒体 [建议] 当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时，应当注意 格式。 [建议] 在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元 素。 [建议] 使用退化到插件的方式来对多浏览器进行支持。 [建议] 只在必要的时候开启音视频的自动播放。 本文档使用 书栈(BookStack.CN) 构建 - 29 -