前端开发规范

wzr

HTML

基本规范

用两个空格代替制表符
- 为什么？
嵌套元素缩进一次（两个空格）
属性的定义全部使用双引号
自闭合（self-closing）标签无需闭合

<img src="" alt="">
可选的闭合标签（closing tag）需闭合，如</li>、</body>
class与id单词字母小写；多个单词使用中划线-连接
布尔值属性不用设置值
- disabled
- checked
- selected
属性顺序排列
- id
- class
- name
- data-xxx
- src, for, type, href
- title, alt
- aria-xxx,role

Head

HTML5 DOCTYPE

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

语言属性

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

<!-- 中文 -->
<html lang="zh-Hans">

<!-- 简体中文 -->
<html lang="zh-cmn-Hans">

<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">

<!-- English -->
<html lang="en">

注意：zh以及zh-CN都已经废弃

字符编码

以无 BOM 的 utf-8 编码作为文件格式;
指定字符编码的 meta 必须是 head 的第一个直接子元素；

IE 兼容模式

优先使用最新版本的IE 和 Chrome 内核

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

favicon

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：

在 Web Server 根目录放置 favicon.ico 文件；
使用 link 指定 favicon；

<link rel="shortcut icon" href="path/to/favicon.ico">

引入`css`与`javascript`

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为text/css和text/javascript分别是它们的默认值。

CSS

基本规范

声明块格式

选择器分组时，保持独立的选择器占用一行；
声明块的左括号 { 前添加一个空格；
声明块的右括号 } 应单独成行；
声明语句中的 : 后应添加一个空格；
声明语句应以分号 ; 结尾；
一般以逗号分隔的属性值，每个逗号后应添加一个空格；
rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格；
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）；
十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;；

声明顺序

相关属性应为一组，推荐的样式编写顺序

Positioning（定位）
- 定位可以从正常的文档流中移除元素，还能覆盖盒模型样式，因此排在第一
Box model（盒模型）
- 盒模型决定了组建的尺寸和位置，排在第二
Typographic（排版）
- 决定内部样式
Visual（视觉）
- 决定内部样式
Others

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

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box model */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

  /* Typographic */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;

  /* Other */
  cursor: pointer;
}

前端开发规范

HTML

基本规范

Head

HTML5 DOCTYPE

语言属性

字符编码

IE 兼容模式

favicon

引入css与javascript

CSS

基本规范

声明块格式

声明顺序

引入`css`与`javascript`