前端开发规范之命名规范

HTML:
1.单标记标签统一加/结尾
2.所有跟数据有关的按钮都用input
3.定位属性要写全，为0不省略
4.给有事件的元素统一加类
5.单独模块用section包起来,class是模块名
6.导航，footer单独之外，其余的尽量用一个大的容器包裹。
7.对于元素属性的定义，确保全部使用双引号，杜绝单引号。
8.引入css文件和js文件的时候不要指定type属性。
9.HTML属性顺序 class>id, name>data->src> for>type>href>value>title>alt>role>aria-
10.布尔型属性不用赋值。
11.尽量减少标签的数量。
12.尽量避免js生成标签。
CSS
1．用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
2．为选择器分组时，将单独的选择器单独放在一行。
3．为了代码的易读性，在每个声明块的左花括号前添加一个空格。
4．声明块的右花括号应当单独成行。
5．每条声明语句的 : 后应该插入一个空格。
6．为了获得更准确的错误报告，每条声明都应该独占一行
7．所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
8．对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
9．不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）
10．对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
11．十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
12．尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
13．为选择器中的属性添加双引号，例如，input[type=”text”]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
14．避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;
15．声明顺序：①Positioning（定位）②box modal（盒模型）③Typographic④Visual
16．不要使用@important(代替的几种方法：①使用多个link②使用sass或less预处理将讴歌文件编译成一个文件③通过rails，jekyll或其他系统中提供的css文件合并功能)
17．媒体查询尽量放在相关规则附近
18．使用私有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，以便于多行编辑
19．对于只包含一条声明的样式，为了易读和便于编辑，建议放在同一行，对于有多条声明的样式，还是用改将声明分为多行。
20．尽量使用简写形式声明属性。常见的有（padding,margin,font,background,border,border-radius）
21．Less和sass避免不必要的嵌套
22．较长的注释，要写完整的句子，一般注释，要简洁
23．CLASS命名
a.名称中只能出现小写字母和破折号（中横线）
b.避免过度任意的简写（.btn 代表 button，但是 .s 不能表达任何意思。）
c.Class应该尽可能的短，并且意义明确。
d.使用有意义的名称。使用有组织有目的的名称。
e.基于最近的父class或基本的class作为新的class前缀
f.使用.js-*来表示行为（与样式相对）并且不要包含到css文件
24．选择器
(1)对于通用元素使用class，利于渲染性能优化
(2)对于经常出现的组件，避免使用属性选择器
(3)选择器尽可能短，并且尽量限制组成选择器的元素个数（建议不超过3）
(4)只有在必要的时候才将class限制在最近的父级元素内
25．代码组织
(1)以组件为单位组织代码段
(2)制定一致的注释规范
(3)使用一致的空白符代码分隔块，这样利于扫描较大的文档
(4)如果使用多个css文件，将其按照组件而非页面的形式拆分，因为页面会被重组，而组建智慧移动
26．编辑器配置
(1)用两个空格代替tab
(2)保存文档时，删除尾部的空白符
(3)设置文件编码为utf-8
(4)在文件结尾添加一个空白格

JS
A.一律使用4个空格
B.Continuation-indentation同样使用4个 空格，跟上一行对齐
C.Statement之后一律以分号结束，不省略
D.单行长度，理论上不要超过80列，不过如果编辑器开启soft wrap可以不考虑单行长度
E.若需要换行，存在操作符的情况，一定在操作符后换行。然后换的行缩进4个空格
F.若多次换行的话不用继续缩进
G.方法之间加空行
H.单行或多行注释前加空行
I.逻辑块之间加空行以增加可读性
J.标准变量采用驼峰标识
K.使用ID的地方一定要全大写.。如targetID
L.使用URL的地方一定全大写。如reportURL
M.涉及Android的，一律大写第一个字母
N.涉及iOS 的，一律小写第一个字母，大写后两个字母
O.常量采用大写字母，下划线连接的方式
P.构造函数，大写第一个字母
Q.字符常量统一使用’’单引号
R.初始化一个变量，该变量后来可能被赋值为对象值，变量初始话值为null
S.与一个可能或可能没有对象值得初始变量进行比较，变量初始值为null
T.该变量传递到一个对象被期望的函数，变量初始值为null
U.该变量作为从期望对象的函数返回，变量初始值为null
V.不要用null来测试是否为空
W.不要用null来判断初始值变量是不是为null
X.不要直接使用undefined进行变量判断
Y.使用字符串“undefined”对变量进行判断
Z.双斜线后，必须跟注释内容保留一个空格
AA.单行注释应独占一行，前边不允许有空行，缩进与下一行代码保持一致
AB.单行注释可位于一个代码行的末尾。格式（ .// 舒适内容）
AC.多行注释最少三行
AD.多行注释前边留空一行
AE.难于理解的代码段使用多行注释
AF.可能存在错误的代码段使用多行注释
AG.浏览器特殊的hack代码使用多行注释
AH.想吐槽产品的逻辑合作的同事使用多行注释
AI.业务逻辑相关的代码使用多行注释
AJ.注释内容与星标保留一个空格
AK.所有方法，构造函数，具有方法的对象使用文档注释 如需要的参数等
AL.括号前后有空格，花括号起始，不另换行，结尾新起一行
AM.花括号必须要，即使内容只有一行。
AN.涉及if for while do…while try…catch..finally的地方都必须使用花括号
AO.If else else 前后都留有空格
AP.Switch和括号之间留有空格，case需要缩进，break之后跟下一个case中间留一个break li ne
AQ.花括号必须要，即使内容只有一行，绝不允许下边情况switch的falling through一定要有注释特别说明，no default的情况也要特别说明switch (condition) { case “first”: // code break; case “third”: // code break; default: // code } switch (condition) { // obvious fall through // 这里为啥JSHint默认就会放过，因为 case “first” 内无内容 case “first”: case “second”: // code break; case “third”: // code /* falls through */ // 这里为啥要加这样的注释， 明确告知JSHint放过此处告警 default: // code } switch(condition) { case “first”: // code break; case “second”: // code break; // no default }
AR.普通for循环，分号后留有一个空格，判断条件等操作符两边不留空格，前置条件如果有多个，逗号后留一个空格
AS.For-in一定要有hasownproperty的判断，否则jslint或者jshint都会有一个警告
AT.所有函数内部变量声明放在函数内头部，只使用一个var（多了会报错），一个变量一行，在行末跟注释
AU.函数一定要先声明再使用，
AV.unction declaration 和 function expression 的不同，function expression 的（）前后必须有空格，而function declaration 在有函数名的时候不需要空格， 没有函数名的时候需要空格。
AW.函数调用括号前后不需要空格
AX.立即执行函数的写法，最外层必须包一层括号
AY.”use strict” 决不允许全局使用， 必须放在函数的第一行， 可以用自执行函数包含大的代码段, 如果 “use strict” 在函数外使用， JSLint 和 JSHint 均会报错
AZ.完全避免 == != 的使用， 用严格比较条件 === !==
BA.eval 非特殊业务， 禁用！！！
BB.with 非特殊业务， 禁用！！！