小哥哥小姐姐们这里有一份前端开发规范，求求看一遍吧

HTML

一， HTML5 doctype

为每个 HTML 页面的第一行添加标准模式的声明，这样能够确保在每个浏览器中拥有一致的展现

二， 头部声明

1，语言

在 html 标签中通过 lang 属性进行明确的语言声明，将会有助于翻译，简体中文和繁体中文网页所属性值如下：

--- 简体中文--- 繁体中文

但是，目前这一类的兼容性不好，虽然大陆地区用的都是简体中文。因此推荐使用下边这一种：

--- 包括各种大方言、小方言、繁体、简体等等都可以被匹配到

如果以后兼容性没有问题，基本上中国大陆地区使用的就是 zh-Hans

2，编码

在 head 中第一行统一使用 utf-8 编码声明，兼容性最好:

3，Viewport

设置 viewport 的宽度为设备宽度，默认缩放比为 1（允许用户缩放），设置 viewport-fit=cover 以兼容 iPhone X 全面屏 “刘海” 的显示

4，DNS 预读取

要在头部开启这个，是因为部分浏览器默认关闭此选项，打开后，当遇到a标签，会自动将 href 中的域名解析为 IP 地址，这个解析过程是与用户浏览网页并行处理的。但是为了确保安全性，在 HTTPS 页面中不会自动解析。

而指向其他地址或文件的 link 标签，则可以按如下书写：

5，渲染偏好

对于国内各种双核浏览器，通过设置 renderer 要求它们使用 webkit 内核，提升性能，减少兼容问题

对于 IE 浏览器，通过设置 IE=edge 要求它使用最新的版本，提升性能，减少兼容问题

对于百度搜索强制转码的流氓做法，通过 no-transform 禁止其自动转码，不然会被嵌入广告

指示浏览器对类似电话、邮箱或地址的内容不要自动识别（移动端）

6，文档信息

HTML 文档的一些元数据，主要包括：作者、描述、关键词，用来被机器识别，提高 SEO 效率

三，属性顺序

属性应该按照特定的顺序出现以保证易读性：

class

id

name

data-*

src, for, type, href, value , max-length, max, min, pattern

placeholder, title, alt

required, readonly, disabled

class 是为高可复用组件设计的，所以应处在第一位

id 更加具体且应该尽量少使用（留给 JS 做“钩子”，或者在 vue/react 中用数据驱动，根本不必使用 id），所以将它放在第二位

举例：

Example link

四，引入 CSS 和 JavaScript 文件

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

基于 CSS 样式覆盖的考虑，公用样式应该在最前边，越特定的放越后面

--- 公用，消除浏览器表现不一致的问题

--- 公用，属于自定义的样式文件

--- 该页面自己特定的样式文件

基于网页加载速度和性能的考虑，script 标签都放到 body 元素的最后边。因为 script 中 JS 文件的加载会阻塞 DOM 和 CSSOM

........................

五，标签中的布尔型属性

布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要

1上边的 disabled checked selected 直接在标签中写上就行，不必写成 selected = "true"

CSS

1，空格

为了代码的易读性，应该：

在每个声明块的左花括号前添加一个空格

声明块的右花括号应当单独成行

每条声明语句的冒号 : 后应该插入一个空格

所有声明语句都应当以分号结尾（最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，代码可能更易出错）

对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）

2，空行与分号

为了获得更准确的错误报告，每条声明都应该独占一行

为了代码的易读性，声明块之间应空一行

空格与空行举例：

/*Bad CSS */.selector,.selector-secondary,.selector[type=text]{padding:15px;margin:pxpx15px;background-color:rgba(,,,0.5);box-shadow:px1px2px#CCC,inset1px#FFFFFF}.input{width:100px;height:100px;}/*Good CSS */.selector,/* - 每条声明都应该独占一行 */.selector-secondary,.selector[type="text"]{/* - 在每个声明块的左花括号前添加一个空格 */padding:15px;/* - 每条声明语句的冒号 : 后应该插入一个空格 */margin-bottom:15px;background-color:rgba(,,,.5);box-shadow:1px2px#ccc, inset1px#fff;/* - 每个逗号后面都应该插入一个空格，所有声明语句都应当以分号结尾 */}/* - 声明块的右花括号应当单独成行 *//* - 声明块之间应空一行 */.input{width:100px;height:100px;}

3，十六进制与 0

十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分

尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff

避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;

4，声明顺序

定位（文档流）

盒模型

字体排版，背景，边框

显示/隐藏

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面

举例：

.declaration-order{/* 定位 */position:absolute;top:;right:;bottom:;left:;z-index:100;/* 盒模型 */display:block;float:right;width:100px;height:100px;/* 字体排版，背景，边框 */font:normal13px"Helvetica Neue", sans-serif;line-height:1.5;color:#333;text-align:center;background-color:#f5f5f5;border:1px solid#e5e5e5;border-radius:3px;/* 显示/隐藏 */opacity:1;}

5，命名规范

采用长命名方式

例如：

但是一味地用长命名会导致层级过多，例如：container-wrapper-box-ul-li-p-span-em

一般会把层级限制在 4 层以内，为了保证达到这一点，需要结合语义化来命名，这样既易于阅读，又能避免层级过多

【布局】

文档 doc头部 header(hd)主体 body尾部 footer(ft)主栏 main侧栏 side容器 box/container

【通用部件】

列表 list列表项 item表格 table表单 form链接 link标题 caption/heading/title菜单 menu集合 group条 bar内容 content结果 result

【组件】

按钮 button(btn)字体 icon下拉菜单 dropdown工具栏 toolbar分页 page缩略图 thumbnail警告框 alert进度条 progress导航条 navbar导航 nav子导航 subnav面包屑 breadcrumb(crumb)标签 label标签页 tab提示框 tooltip弹出框 popover轮播图 carousel手风琴 collapse

【语义化小部件】

品牌 brand标志 logo额外部件 addon版权 copyright注册 regist(reg)登录 login搜索 search热点 hot帮助 help信息 info提示 tips开关 toggle新闻 news广告 advertise(ad)排行 top下载 download

【功能部件】

左浮动 fl右浮动 fr清浮动 clear

【状态】

前一个 previous(pre)后一个 next当前的 current显示的 show隐藏的 hide打开的 open关闭的 close选中的 selected有效的 active默认的 default反转的 toggle禁用的 disabled危险的 danger主要的 primary成功的 success提醒的 info警告的 warning出错的 error大型的 lg小型的 sm超小的 xs

es-lint

一，尽量使用 ES6 规范代码

变量的声明不再使用 var ，而是使用 let ，如果定义的是常量（不变的数据），那么应该使用 const

比如:小程序中经常使用的 instance , 应该写成 const instance = thisfor 循环中使用 let ，可以生成块级作用域for (var x = 0; x

尽量使用箭头函数，且对函数进行简写

使用箭头函数的时候，可以不用书写 const that = this 来绑定 this 指向，因为箭头函数默认绑定 thisonReachBottom: function () { xxxxxxxx}上边的函数可以简写为：onReachBottom () { xxxxxxxx}

其余 ES6 规范同理，推荐通读 ES6 标准入门，网址：http://es6.ruanyifeng.com/

二，空格和引号

编辑器空格统一设置为 2 个空格

引号基本使用单引号，除非需要两层引号，外层才会使用双引号

数据初始化声明时冒号右边一定有一个空格，单行注释的右边一定有一个空格，如果前边有数据的，则注释的前边也有一个空格,逗号的右边也要有空格，比如：

data:{can_clock:,//-不在打卡有效时限,1-在打卡有效时间 has_clock:,//-没有打过卡1-打过卡 need_refresh:false,// 用于回复评论后刷新页面的标记},

代码块之间有空格，比如：

if(){xxx}elseif(){xxx}

条件判断，赋值等，左右都有空格，比如：

letshuZai=10086if(shuZai===10086){xx}letwanSha=shuzai===10086?:1

三，驼峰书写法与下划线

参数和变量使用驼峰书写，比如：

share(shuZai,wanSha){}letshuZai=10086

初始值两者均可，但因为后台返回的数据规范是下划线，所以此处使用下划线较多，比如：

data:{can_clock:,//-不在打卡有效时限,1-在打卡有效时间 has_clock:,//-没有打过卡1-打过卡 need_refresh:false,// 用于回复评论后刷新页面的标记}

HTML 中的属性值除了 data-* 这类自定义属性不能使用驼峰书写之外，其余二者均可

四，分号与大括号

在 ES5 中，分号是推荐必写的，但在 eslint 中，分号可以省略，并且它推荐省略，因为按照它的规范来写的话，并不会出现 JS 引擎无法识别断句的问题。在小程序中并没有引用 es-lint，所以还是要写分号

大括号必须写，不能省略，比如：

if()xxxelseif()xxxif(){xxx}elseif(){xxx}

最后放一张封面图：