JavaScript 规范
每个文件头部要注释文件信息：创建时间、创建人，也可以备注下该文件负责的功能信息；
行代码结束后添加 ; ；
1、二元运算符前后
2、三元运算符'?:'前后
3、代码块'{'前
4、下列关键字前：else, while, catch, finally
5、下列关键字后：if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
6、单行注释'//'后（若单行注释和代码同行，则'//'前也需要），多行注释'*'后
7、对象的属性值前
8、for循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格
9、无论是函数声明还是函数表达式，'{'前一定要有空格
10、函数的参数之间
1、变量声明后（当变量声明在代码块的最后一行时，则无需空行）
2、注释前（当注释在代码块的第一行时，则无需空行）
3、代码块后（在函数调用、数组、对象中则无需空行）
4、文件最后保留一个空行
行代码结束后添加 ';' ；
换行的地方，行末必须有 ',' 或者运算符；
以下几种情况不需要换行：
下列关键字后：else, catch, finally
代码块 '{' 前
以下几种情况需要换行：
代码块 '{' 后和 '}' 前
变量赋值后
双斜线后，必须跟一个空格；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。
if (condition) {
allowed();
}
var zhangsan = 'zhangsan';
最少三行, '*'后跟一个空格，具体参照右边的写法；
建议每个 function 都要进行注释；
以下情况下必须使用：
难于理解的代码段；
工具函数，公共方法；
可能存在错误的代码段；
浏览器特殊的HACK代码；
业务逻辑强相关的代码。
var x = 1;
各类标签@param, @method等请参考usejsdoc和JSDoc Guide；
建议在以下情况下使用：
所有常量；
所有函数；
所有类；
function foo(a, b, c, d, g, j) {
...
return true;
}
最外层统一使用单引号。
var x = "test";
var y = 'foo',
z = '<div id="test"></div>';
1、标准变量采用小驼峰式命名法（除了对象的属性外，主要是考虑到接口返回的数据，但尽量也要用）；
4、'Android'在变量名中大写第一个字母；'iOS'在变量名中小写第一个，大写后两个字母；
5、常量全大写，用下划线连接；
6、构造函数采用大驼峰式命名法；
var thisIsMyName;
var goodID;
var reportURL;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
function myFun(name) {
...
}
对象属性名不需要加引号；
对象以缩进的形式书写，不要写在一行；
适用场景：
初始化一个将来可能被赋值为对象的变量；
与已经初始化的变量做比较；
作为一个参数为对象的函数的调用传参；
作为一个返回对象的函数的返回值；
不适用场景：
不要用null来判断函数调用时有无传参；
不要与未初始化的变量做比较；
永远不要直接使用 undefined 进行变量判断；
使用 typeof 和字符串 'undefined' 对变量进行判断。
if (undefined === person) {
...
}
if ('undefined' === typeof person) {
...
}
获取对象属性时要先判断对象一定存在，遍历数组时，要先确定数组存在，并且是个数组；
尽量用'=', '!'代替'`', '!='；
for-in 里一定要有 hasOwnProperty 的判断；
不要在内置对象的原型上添加方法，如Array, Date；
不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；
变量不要先使用后声明；
不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；
不要在同个作用域下声明同名变量；
不要在一些不需要的地方加括号，例：delete(a.b)；
不要使用未声明的变量（全局变量需要加到.jshintrc文件的globals属性里面）；
不要声明了变量却不使用；
不要在应该做比较的地方做赋值；
debugger不要出现在提交的代码里；
数组中不要存在空元素；
不要在循环内部声明函数；
不要像这样使用构造函数，例：new function () { ... }, new Object；
对上下文this的引用只能使用'_this', 'that', 'self'其中一个来命名；
行尾不要有空白字符；
switch的falling through和no default的情况一定要有注释特别说明；
不允许有空的代码块。
css、less、sass、scss
1、每个属性声明末尾都要加分号；
2、类名使用小写字母，以中划线分隔；
3、id 采用全大写下滑线式命名；
4、less、sass、scss 中的变量、函数以中划线分隔命名；
5、相关的属性声明按右边的顺序做分组处理，组之间需要有一个空行；
6、尽量避免使用 !important 。
（1）定位属性：position display float left top right bottom overflow clear z-index
（2）自身属性：width height padding border margin background
（3）文字样式：font-family font-size font-style font-weight font-varient color
（4）文本属性text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能。
[
[
"display",
"visibility",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"clip",
"zoom"
],
[
"table-layout",
"empty-cells",
"caption-side",
"border-spacing",
"border-collapse",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image"
],
[
"-webkit-box-orient",
"-webkit-box-direction",
"-webkit-box-decoration-break",
"-webkit-box-pack",
"-webkit-box-align",
"-webkit-box-flex"
],
[
"position",
"top",
"right",
"bottom",
"left",
"z-index"
],
[
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"-webkit-box-sizing",
"-moz-box-sizing",
"box-sizing",
"border",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"-webkit-border-radius",
"-moz-border-radius",
"border-radius",
"-webkit-border-top-left-radius",
"-moz-border-radius-topleft",
"border-top-left-radius",
"-webkit-border-top-right-radius",
"-moz-border-radius-topright",
"border-top-right-radius",
"-webkit-border-bottom-right-radius",
"-moz-border-radius-bottomright",
"border-bottom-right-radius",
"-webkit-border-bottom-left-radius",
"-moz-border-radius-bottomleft",
"border-bottom-left-radius",
"-webkit-border-image",
"-moz-border-image",
"-o-border-image",
"border-image",
"-webkit-border-image-source",
"-moz-border-image-source",
"-o-border-image-source",
"border-image-source",
"-webkit-border-image-slice",
"-moz-border-image-slice",
"-o-border-image-slice",
"border-image-slice",
"-webkit-border-image-width",
"-moz-border-image-width",
"-o-border-image-width",
"border-image-width",
"-webkit-border-image-outset",
"-moz-border-image-outset",
"-o-border-image-outset",
"border-image-outset",
"-webkit-border-image-repeat",
"-moz-border-image-repeat",
"-o-border-image-repeat",
"border-image-repeat",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height"
],
[
"font",
"font-family",
"font-size",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"line-height",
"text-align",
"-webkit-text-align-last",
"-moz-text-align-last",
"-ms-text-align-last",
"text-align-last",
"vertical-align",
"white-space",
"text-decoration",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-indent",
"-ms-text-justify",
"text-justify",
"letter-spacing",
"word-spacing",
"-ms-writing-mode",
"text-outline",
"text-transform",
"text-wrap",
"-ms-text-overflow",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"-ms-word-wrap",
"word-wrap",
"-ms-word-break",
"word-break"
],
[
"color",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"-ms-background-position-x",
"background-position-x",
"-ms-background-position-y",
"background-position-y",
"-webkit-background-clip",
"-moz-background-clip",
"background-clip",
"background-origin",
"-webkit-background-size",
"-moz-background-size",
"-o-background-size",
"background-size"
],
[
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"opacity",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
"-ms-interpolation-mode",
"-webkit-box-shadow",
"-moz-box-shadow",
"box-shadow",
"filter:progid:DXImageTransform.Microsoft.gradient",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
"text-shadow"
],
[
"-webkit-transition",
"-moz-transition",
"-ms-transition",
"-o-transition",
"transition",
"-webkit-transition-delay",
"-moz-transition-delay",
"-ms-transition-delay",
"-o-transition-delay",
"transition-delay",
"-webkit-transition-timing-function",
"-moz-transition-timing-function",
"-ms-transition-timing-function",
"-o-transition-timing-function",
"transition-timing-function",
"-webkit-transition-duration",
"-moz-transition-duration",
"-ms-transition-duration",
"-o-transition-duration",
"transition-duration",
"-webkit-transition-property",
"-moz-transition-property",
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"-webkit-transform",
"-moz-transform",
"-ms-transform",
"-o-transform",
"transform",
"-webkit-transform-origin",
"-moz-transform-origin",
"-ms-transform-origin",
"-o-transform-origin",
"transform-origin",
"-webkit-animation",
"-moz-animation",
"-ms-animation",
"-o-animation",
"animation",
"-webkit-animation-name",
"-moz-animation-name",
"-ms-animation-name",
"-o-animation-name",
"animation-name",
"-webkit-animation-duration",
"-moz-animation-duration",
"-ms-animation-duration",
"-o-animation-duration",
"animation-duration",
"-webkit-animation-play-state",
"-moz-animation-play-state",
"-ms-animation-play-state",
"-o-animation-play-state",
"animation-play-state",
"-webkit-animation-timing-function",
"-moz-animation-timing-function",
"-ms-animation-timing-function",
"-o-animation-timing-function",
"animation-timing-function",
"-webkit-animation-delay",
"-moz-animation-delay",
"-ms-animation-delay",
"-o-animation-delay",
"animation-delay",
"-webkit-animation-iteration-count",
"-moz-animation-iteration-count",
"-ms-animation-iteration-count",
"-o-animation-iteration-count",
"animation-iteration-count",
"-webkit-animation-direction",
"-moz-animation-direction",
"-ms-animation-direction",
"-o-animation-direction",
"animation-direction"
],
[
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"cursor",
"-webkit-user-select",
"-moz-user-select",
"-ms-user-select",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"-moz-tab-size",
"-o-tab-size",
"tab-size",
"-webkit-hyphens",
"-moz-hyphens",
"hyphens",
"pointer-events"
]
]
常见的属性简写包括：font、background、transition、animation 。
颜色16进制用小写字母，颜色16进制尽量用简写。
例：
尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。
尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。
尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。
