前端规范

* 文件命名:   统一用 小写字母下划线连接 即  my_project

* HTML相关：

    * 可省闭合即  <img src=“”> 

    * 可省略 true  <input disabled>

    * 标签中统一用双引号 <img src=“”>

* CSS相关: 

    * 空行：

        * 每个css类之间需加

        * 不同属性类型之间需加

        * 文件最后一行需加

    * 换行：

        * 多类共用一个样式，需换行 .a, .b{}  a和b需换行

    * 注释：统一用 /*  */

    * 命名：

        * css Class命名  .my-btn{}

        * css ID命名 #myButton {}

        * scss 中变量，函数，混合名 全用驼峰命名 $myColor 

    * 属性声明顺序：从上到下顺序  重排比重绘优先级高

        * 容器如何显示：display visibility  float clear overflow clip zoom

        * Ul Ol 中 列表前的点样式 list-style border-space table-layout

        * 容器设置内核 -webkit-box-flex -webkit-box-align -webkit-box-flex

        * 容器定位布局 position z -index top left bottom right

        * 容器的样式 涉及到重排 width height padding margin

        * 容器中字体样式 font-size font-style text-align line-height

        * 容器内部样式不涉及重排 background color background-size

        * 容器内特殊样式 box-shadow opacity text-shadow

        * css3动画 transition

        * 移入鼠标样式 cursor content

    * 颜色：

        * 用16进制小写字母 #aaaaaa

        * 可以缩写用缩写 #aaa

    * 属性缩写：

        * 例margin padding 尽量用简写

        * 而 font background transition animation 不用简写

    * 查询媒体 

        * 尽量靠近他们相关的规则

        * 例 .button {} 

        * @media(min-width <480) {.button{} }

    * scss 相关

        * 声明顺序

            * @extend

            * @include 包含 @content

            * @include 不包含 @content

            * 自身属性

            * 嵌套规则

        * @import 引入 文件可以省略 _ 和 .scss

        * 去掉不必要的父级符号“&” 

            * &:first-child{} not good

            * :first-child{} good

    * 同 个属性不同前缀应该保持垂直方向保持对齐

        *  -webkit-border-radius: 5px          

        *      -moz-border-radius: 5px

        *               border-radius: 5px

* javaScript

    * 以下情况需要加分号

        * 变量声明  var x = 1;

        * 表达式      x++;

        * return       return x;

        * throw       throw newError();

        * break

        * continue

        * do-while

    * 需加空行

        * 变量声明后

        * 注释前

        * 代码块后

        * 文件最后保留一个空行

    * 换行

        * 不换行

            * else catch finally 

            * 代码块 { 前

        * 换行

            * 代码块 { 后 和 } 前

            * 变量赋值后

    * 注释

        * 单行注释

            * // 后加个空格  // 注释

            * 缩进与下一行代码保持一致 

            * 可位于代码行尾与代码间加个空格

        * 多行注释

            * * 后加个空格

            * 在以下情况下用

                * 难于理解的代码块

                * 可能存在错误的代码块

                * 浏览器特殊的hack代码

                * 业务逻辑强的代码

        * 文档注释

            * 函数 @func 函数  @desc 介绍  @param {string} a 参数介绍

            * 常量

            * 所有类

    * 引号:  js统一用单引号

    * 变量命名

        * 驼峰命名 var thisIsMyName;

        * ID与URL 在变量中全大写  var goodID; var baseURL;

        * Android iOS 安卓第一个大写,iOS 非第一个大写

        * 常量全大写用_下划线连接 const MAX_NUM  = 10;

        * 构造函数 第一个大写 function Person() {}

    * 变量声明

        * 统一声明： let a =10, b = 20, c = a + 10; 需换行

    * 函数

        * 函数括号前不要空格 后需要空格 function() {}

        * 函数调用括号前不需要空格

        * 立即执行包一层括号

        * 参数逗号后有一个空格

        * 不给inline function命名

    * 数组对象

        * 对象属性名不加引号

        * 对象不要写在一行

        * 数组对象最后不要有逗号

    * 括号

        * 下列关键字要加大括号 即使代码块内容只有一行 

        * if else while do switch try catch finally with  for

    * null 适合场景

        * 初如化给一个可能赋值为对象的变量

        * 函数的参数为对象 可以用null

        * 一个返回对象函数的返回值

    * undefined

        * 不要直接用undefined进行变量判断

        * 使用typeOf来进行比较

        * typeof a === ‘undefined'

    * Js 注意点

        * for in 循环遍历时，先用hasOwnProperty进行判断，再取值

        * 上下文this 变量名用 _this that self