前端书写规范建议

1.项目、目录及文件命名

1.1 全部采用小写方式，以下划线分隔。

项目命名： 用项目对应的英文单词命名。例：my_project_name
目录命名： 有复数结构时，要采用复数命名法。例：scripts, styles, images, data_models
HTML文件命名： 例：login.html, error_report.html
CSS, SCSS文件命名： 例：base.css, pagename.css
JS文件命名： 例：jquery.2.2.3.min.js, pagename.js

2.HTML

2.1 语法

缩进使用soft tab（4个空格）
嵌套的节点应当缩进一次
在属性的定义上，使用双引号，不要使用单引号
属性名全小写，用中划线做分隔符
不要在自动闭合标签结尾处使用斜线
不要忽略可选的关闭标签，例： </li> 和 </body>

2.2 HTML5 doctype、lang属性、字符编码、IE兼容模式

在页面开头使用这个简单地 doctype 来启用标准模式，使其在每个浏览器中尽可能一致的展现
建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
通过声明一个明确的字符编码，让浏览器快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。最好是设置为 edge mode ，从而通知 IE 采用其所支持的最新的模式。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    </head>
</html>

2.3 引入css,js文件

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

<!-- External CSS -->
<link rel="stylesheet" href="main.css">

<!-- External JS -->
<script src="main.js"></script>

2.4 属性顺序、boolean属性

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class 用于标识高度可复用组件，所以应处在第一位；
id 更加具体且应该尽量少使用，所以将它放在第二位。

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；
boolean属性的存在表示取值为true，不存在则表示取值为false。例：<input type="checkbox" value="1" checked>

2.5 JS生成标签、减少标签数量

在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。
编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。

3.CSS, SCSS

3.1 语法

缩进，使用soft tab（4个空格）。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

3.2 属性声明顺序

Positioning（定位，如position，top，z-index）
Box model（盒模型，如display，box-sizing，width，border）
Typographic（排版，如font，line-height，text-align）
Visual（视觉，如background，color,opacity）
Other（其他，如cursor）

3.3 选择器

对于通用元素使用 class ，这样利于渲染性能的优化。
对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响
选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3

4.JavaScript

4.1 命名规则

变量命名：

驼峰式命名。前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)
尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型
常量全大写，用下划线连接
构造函数，大写第一个字母
jquery对象必须以'$'开头命名

var firstName = "John";

var MAX_COUNT = 10;

var $body = $('body');

函数命名：

前缀应当为动词。命名建议：可使用常见动词约定

动词	含义
can	判断是否可执行某个动作(权限)
has	判断是否含有某个值
is	判断是否为某个值
get	获取某个值
set	设置某个值
load	加载某些数据

4.2 函数

无论是函数声明还是函数表达式，'('前不要空格，但'{'前一定要有空格
函数调用括号前不需要空格
立即执行函数外必须包一层括号
不要给inline function命名
参数之间用', '分隔，注意逗号后有一个空格

4.3 数组、对象

对象属性名不需要加引号；
冒号与属性值间有个空格。
对象以缩进的形式书写，不要写在一行；
数组、对象最后不要有逗号。
字符串使用双引号，数字不需要。

4.4 注意事项

JS 缩进，使用soft tab（4个空格）
通常运算符 ( = + - * / ) 前后需要添加空格
结束行需添加分号;
尽量选用局部变量而不是全局变量
尽量减少DOM调用
将js脚本放到页面底部
使用jquery的data来存取数据，减少对dom的操作
使用on方法绑定事件，这是jquery的推荐使用
选择器的选择：尽量不用标签选择器，能用ID选择器的就不用class选择器