前端开发规范总结
此文档主要实现的目标：代码一致性和最佳实践。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。
一、基本原则
1、结构、样式、行为分离
尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。
2、缩进
统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。
3、文件编码
使用不带 BOM 的 UTF-8 编码。
-
在 HTML 中指定编码
<meta charset="utf-8">； -
无需使用@charset 指定样式表的编码，它默认为 UTF-8（参考 @charset）；
4、一律使用小写字母
- 标签a、span、div、p
- 颜色值小些，同时重叠时简写：#ccc
5、省略外链资源 URL 协议部分
-
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免 Mixed Content 问题，减小文件字节数。
-
其它协议（ftp 等）的 URL 不省略。
6、统一注释
-
必填项：description、author、date
-
有的时候必填，没有时可不填：param、return
例如：
/**
* @description：标题不恰当换行
* @param cName: 目标元素的cName
* @return ：null //没有时可以不写。
* @author ：huanghui
* @date ：2017.07.29
*/
7、代码验证
-
使用 W3C HTML Validator 来验证你的 HTML 代码有效性；
-
使用 W3C CSS Validator 来验证你的 CSS 代码有效性；
二、HTML
尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
1、标签
-
自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
-
可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body>)；
-
尽量减少标签数量
2、Class 与 ID
-
class 应以功能或内容命名，不以表现形式命名；
-
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
-
使用唯一的 id 作为 Javascript hook，同时避免创建无样式信息的 class
3、属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性。
- id
- class
- name
- data-xxx
- src, for, type, href
- title, alt
- aria-xxx, role
4、引号
属性的定义，统一使用双引号。
5、嵌套
-
a 不允许嵌套 div 这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如 a 不允许嵌套 a。
-
嵌套分为语义嵌套和严格嵌套。严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。
- 语义嵌套约束
- 用于
- 或
- 下；
-
- ，
- 用于
- 下；
-
，，，
， 用于 下；
- inline-Level 元素，仅可以包含文本或其它 inline-Level 元素；
- 里不可以嵌套交互式元素 、
-
里不可以嵌套块级元素
、~
、
、
- /
- 、
- /
- /
- 、
- /
- 、
6、布尔值属性
HTML5 规范中 disabled、checked、selected 等属性不用设置值。
7、语义化
没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。
通常情况下，每个标签都是有语义的，所谓语义就是你的衣服分为外套， 裤子，裙子，内裤等，各自有对应的功能和含义。
此外语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。
8、常见标签语义
| 标签 | 语义 |
|---|---|
| <p> | 段落 |
| <h1><h2><h3>… | 标题 |
| <ul> | 无序列表 |
| <ol> | 有序列表 |
| <blockquote> | 大段引用 |
| 一般引用 | |
| 为样式加粗而加粗 | |
| 为强调内容而加粗 | |
| 为样式倾斜而倾斜 | |
| 为强调内容而倾斜 | |
|
代码标识 |
| 缩写 |
9、HEAD
-
文档类型，为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。
<!DOCTYPE html> -
语言属性， lang=”zh-cmn-Hans”
-
字符编码，utf-1
<html> <head> <meta charset="utf-8"> ...... </head> <body> ...... </body> </html> -
IE 兼容模式，优先使用最新版本的 IE 和 Chrome 内核。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -
SEO 优化，title、keywords、description、author
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- SEO --> <title>Style Guide</title> <meta name="keywords" content="关键字"> <meta name="description" content="描述"> <meta name="author" content="作者邮箱地址"> </head> -
viewport，为移动端设备优化，设置可见区域的宽度和初始缩放比例。
<meta name="viewport" content="width=device-width, initial-scale=1.0">- viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
- width: 浏览器宽度，输出设备中的页面可见区域宽度；
- device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
- initial-scale: 初始缩放比例；
- maximum-scale: 最大缩放比例；
-
favicon，在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一：
- 在 Web Server 根目录放置 favicon.ico 文件；
- 使用 link 指定 favicon，
<link rel="shortcut icon" href="path/to/favicon.ico">；
-
HEAD模板
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>标题</title> <meta name="keywords" content="关键字"> <meta name="description" content="不超过150个字符"> <!-- 为移动设备添加 viewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- iOS 图标 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- favicon图标 --> <link rel="shortcut icon" href="path/to/favicon.ico"> </head>
具体点击：CHSI前端规范
huanghui8030@qq.com 于 2016.07.29 整理，如有误请指正。