基本准则

符合web标准, 语义化html, 结构、样式、表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

通用规范

1.所有页面按照统一的格式来写；
2.对所有后台请求的返回结果做判断空处理（保证在后台请求失败的情况下，浏览器控制台不会报错）；
3.所有功能模块写注释，详见下面注释规范；
4.处理逻辑一定要尽量简化，抽取公共框架，减少后期维护成本；
5.tab键用两个空格代替或用两个空格缩进（务必）；
6.代码行之间尽量不要有空行，重大逻辑转折、语法意义转折，方法分割除外，适当空行增强可读性；
7.可使用 W3C HTML/CSS Validator 来验证你的 HTML/CSS 代码有效性;

文件、资源和目录命名约定（适用于所有前端维护的内容和相关目录，(html, css, js, png, gif, jpg, ico)等）

1.字母一律小写，必须是英文单词或者汉语拼音，以英语单词优先，多个单词以连字符 - 连接。只能出现小写引文字母，数字和连字符；
2.浏览器广告拦截插件会将含有这些词的作为广告拦截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao等，页面中尽量避免采用以上词汇来命名；
3.文件命名总是以字母开头而不是数字，以特殊字符开头命名的文件，一般都有特殊的含义与用处，慎用。
4.需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 asdasd.main.min.css）。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。

HTML 规范

1.为每个HTML页面的第一行添加标准模式声明（HTML5 doctype），确保在每个浏览器中拥有一致的展现；

<!DOCTYPE html>
<html>
    <head></head>
</html>

2.明确声明字符编码，确保浏览器快速判断页面内容的渲染方式，约定一致采用UTF-8编码。
3.IE 兼容模式。除非特殊需求，否则约定设置为edge，从而通知 IE 采用其所支持的最新的模式。

1	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

4.元素属性顺序。
HTML 属性统一使用双引号，且应当按照以下给出的顺序依次排列，确保代码的易读性：

- class
- id 、 name
- data-*
- src、for、 type、 href
- title、alt
- aria-*、 role

5.尽量保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，JS脚本之中
6.尽量不使用行内样式

1	<style>.hello-world{}</style>

7.尽量避免通过 JavaScript 生成的标签，它让内容变得不易查找、编辑，并且降低性能
8.重要图片一定要加上alt属性; 给重要的元素和截断的元素加上title
9.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>Frontend Rule</title>
        <!-- 为搜索引擎提供搜索关键字 -->
        <meta name="keywords" content="150字符以内">
        <!-- 为移动设备添加 viewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- iOS 图标 -->
        <link rel="apple-touch-icon-precomposed" href="/apple-icon.png">
        <link rel="shortcut icon" href="path/to/favicon.ico">
    </head>
</html>

CSS规范

一、书写规范

1.为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行；
2.当使用特定浏览器带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
      box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

3.属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
4.每个规则之间始终有一个空行分隔。
5属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
URI值（url()）不要使用引号。
6.为了代码的易读性，在每个声明块的左花括号前添加一个空格；右花括号要单独成行。
7.对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）
8.与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。所以要尽量使用 <link> 标签引入样式
9.如果您觉得上述有的时候容易忘记，可以放心大胆的交给ESLint来帮你规范代码风格 ^_^

二、属性顺序

1.结构性属性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
2.表现性属性：
background, border etc.
font, text

/* 例子 eg. */
.header {
    /* 显示属性 */
    display || visibility
    list-style
    position
    top || right || bottom || left
    z-index
    clear
    float
    
    /* 自身属性 */
    width
    max-width || min-width
    height
    max-height || min-height
    overflow || clip
    margin 
    padding
    outline
    border
    background
    
    /* 文本属性 */
    color
    font
    text-overflow
    text-align
    text-indent
    line-height
    white-space
    vertical-align
    cursor
    content
}

JavaScript规范

1.文件命名可读性强。文件夹、文件的命名与命名空间应能代表代码功能，增强可读性。
2.函数命名按照驼峰命名法。

1	function helloWorld() {}

3.常量要全部大写,变量驼峰命名：

1 2	var GLOBAL //常量 var global //变量

4.排版缩进采用统一的缩进方式排版代码。缩进为2个空格。

If(condition1 || condition2) {
  action1;
} else if (condition3 && condition4) {
  action2;
} else if (condition5
       && condition6
       && condition7
       && condition8) {
 action2;
} else {
  default action;
}

5.关键词、条件括弧后面使用空格；运算操作符号两侧使用空格；语句分割符‘,’后面使用空格

1
2
3

var name[空格]=[空格]value;
if[空格](a,[空格]b) {
}

6.左大括号”{“可以居行尾,右大括号”}”单独占一行，居行首

1 2	if (a && b) { }

7.总是使用 var 来声明变量。如不指定 var，变量将被隐式地声明为全局变量，这将对变量难以控制。如果没有声明，变量处于什么定义域就变得不清（可以是在 Document 或 Window 中，也可以很容易地进入本地定义域）
8.变量声明可以只用一个 var 关键字声明，多个变量用逗号隔开；赋值尽量写在变量声明当中。
9.使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的错误（比较的双方必须是同一类型才会有效）。
10.统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常容易辨别。
11.如果您觉得上述有的时候容易忘记，可以放心大胆的交给JSLint来帮你规范代码风格 ^_^

制定参考：

淘宝团队前端规范
极客学院前端规范

BLOG OF SAM GEEK

前端编码规范