为什么做这件事
目标市面上有很多前端开发规范，有的过于成旧，有的过于简单、片面，好未来培优增长前端团队针对目前这些问题，整理了一份最新最完整的前端开发规范，包括JS、CSS、HTML、Vue等。
做这件事的意义
- 提高代码的可读性和可维护性。
有统计显示，在一个中大型项目中，代码的后期维护成本远高于开发成本。所以，提高代码的可维护性能极大减低项目的维护成本。 - 实现项目研发的标准化。
目前的项目研发流程类似于汽车等工业产品的流水线生产模式，通过开发规范，能有利于研发的标准化。 - 减少bug、利于代码审查。
在艺术的世界里我们提倡天马行空，但是，在代码的世界里，我们要提倡开发规范，这样会减少bug的数量和降低问题的排查时间。
CSS篇
1. 代码风格
1.1 编码
CSS 文件使用无 BOM 的 UTF-8 编码。
UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。
1.2 书写样式
样式书写一般有两种：一种是紧凑格式 ，一种是展开式
/* bad -紧凑型 */
.xes {display: block;width: 50px;}
/* good -展开型 */
.xes {
display: block;
width: 50px;
}
1.3 缩进
统一使用两个空格进行代码缩进
1.4 空格
1.4.1 左括号与类名之间一个空格，属性名与冒号之间不允许有空格，冒号与属性值之间一个空格
/* bad */
.xes{
width:100%;
}
/* good */
.xes {
width: 100%;
}
1.4.2 逗号分隔的取值，逗号之后一个空格
/* bad */
.xes {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
/* good */
.xes {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
1.4.3 为并列声明的多个选择器开启新行
/* bad */
.xes,.xes_logo,.xes_hd {
color: #ff0;
}
/* good */
.xes,
.xes_logo,
.xes_hd {
color: #ff0;
}
1.4.4 颜色值 rgb() rgba() hsl() hsla() rect() 中各个值之间的逗号后面需有空格，且取值不要带有不必要的 0
/* bad */
.xes {
color: rgba(255,255,255,0.5);
}
/* good */
.xes {
color: rgba(255, 255, 255, .5);
}
1.4.5 颜色不带有alpha值的用十六进制的形式，颜色属性值十六进制数值能用简写的尽量用简写，带有alpha的颜色可以使用rgba()
/* bad */
.xes {
color: white;
}
.xes {
background-color: #dddddd;
}
.xes {
color: #fff;
opacity: .5;
}
/* good */
.xes {
color: #fff;
}
.xes {
background-color: #ddd;
}
.xes {
color: rgba(255, 255, 255, .5)
}
1.4.6 不要为 0 指明单位
/* bad */
.xes {
margin: 0px 10px;
}
/* good */
.xes {
margin: 0 40px;
}
1.5 代码大小写
选择器、属性名、属性值关键字全部使用小写字母书写
/* bad */
.XES {
DISPLAY: BLOCK;
}
/* good */
.xes {
display: block;
}
1.6 分号
每个属性声明末尾都要加分号
/* bad */
.xes {
width: 100%
height: 100%
}
/* good */
.xes {
width: 100%;
height: 100%;
}
1.7 属性值引号
css属性值需要用到引号时，统一使用单引号
/* bad */
.xes {
font-family: "Hiragino Sans GB";
}
/* good */
.xes {
font-family: 'Hiragino Sans GB';
}
1.8 行长度
每行不得超过 120 个字符，除非单行不可分割，例如：url
2. 属性简写
2.1 简写
建议在可以使用缩写的情况下，尽量使用属性缩写方式
确实需要在多个方向上设置值时用简写，如果只在一个方向上设置值则不需要简写
/* bad */
.xes {
padding-left: 15px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 15px;
}
/* good */
.xes {
padding: 20px 15px;
}
/* bad */
.xes {
padding: auto auto 15px auto;
}
/* good */
.xes {
padding-bottom: 15px;
}
/* bad */
.xes {
padding: 15px 15px;
}
/* good */
.xes {
padding: 15px;
}
3 选择器
3.1 选择器书写
尽量少用通用选择器 *
尽量不使用 id 选择器
不使用无具体语义定义的标签选择器
/* bad */
* {}
#hwl {}
div {}
/* good */
.xes {}
3.2 清除浮动
当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
触发 BFC 的方式很多，常见的有：
float 非 none
position 非 static
overflow 非 visible
对已经触发 BFC 的元素不需要再进行 clearfix。
3.3 !important
尽量不使用 !important 声明。
4. less和sass
4.1 嵌套层级
建议嵌套层级不要超过3级
4.2 变量
可复用的属性值尽量抽离为页面变量，易于统一维护
1）saas写法
/* bad */
.xes {
color: #fff;
border-color: #fff;
}
/* good */
$color: #fff;
.xes {
color: $color;
border-color: $color;
}
- less写法
/* bad */
.xes {
width: 100px;
}
.hwl {
width: 100px;
}
/* good */
@width: 10px;
.xes {
width: @width;
}
.hwl {
width: @width;
}
4.3 善用mixin
根据功能定义模块，在需要使用的地方通过@include调用，可以避免编码重复输入代码
mixin的命名规则沿用css的中横线连接的规则
/* bad */
.xes-text {
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.xes-msg {
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* good 抽离成mixin来调用*/
@mixin text-overflow() {
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.xes-text {
@include text-overflow();
}
.xes-msg {
@include text-overflow();
}
4.4 mixin参数空格问题
mixin的参数有多个时，逗号分隔，逗号后面跟一个空格
.size (@width: 100px, @height: 40px) {
width: @width;
height: @height;
}
/* bad */
.box {
.size(30px,20px);
}
/* good */
.box {
.size(30px, 20px);
}
4.5 运算规范
运算符号前后空出一个空格
/* bad */
.xes {
width: calc(100%-100px);
}
/* good */
.xes {
width: calc(100% - 100px);
}
5. 命名规范
5.1 确保类的命名总是以字母开头而不是数字，且字母一律小写，class命名一律以中横线连接
ps: 中横线连接的好处：节省操作——少按一个shift键；同时也能能很好的区分js变量命名，一般js变量命名习惯于下划线
/* bad */
.1-xes {
background: #fff;
}
.Xes {
background: #fff;
}
.xesLogo {
background: url("xx.png") no-repeat center;
}
.xes_logo {
background: url("xx.png") no-repeat center;
}
/* good */
.xes {
background: #fcfcfc;
}
.xes-logo {
display: block;
}
5.2 使用有意义的名称
/* bad */
.ico1 {
background: url("xx.png") no-repeat center;
}
.btn1{
width: 100px;
height: 30px
}
/* good */
.ico-logo {
background: url("xx.png") no-repeat center;
}
.btn-login {
width: 100px;
height: 30px;
}
5.3 命名规范
建议布局方面的类名：以g为命名空间，例如：.g-wrap，.g-header, .g-content等
建议状态方面的类名：以s为命名空间，例如：.s-current, .s-selected等
建议工具方面的类名：以u为命名空间，表示不耦合业务逻辑，例如： .u-clearfix, .u-ellipsis等
建议icon类的命名：以ico开头，例如： .ico-logo, ico-arrow等
建议功能性的可以功能英文单词的缩写开头，比如：按钮类：.btn-login，.btn-submit等
6. 代码注释
6.1 单行注释
星号与内容之间保留一个空格
/* 这是注释示范 */
6.2 多行注释
开头两个星号，星号一列对齐，星号和内容之间保留一个空格
/**
* 这是多行注释的规范
* 这是多行注释的规范
* 这是多行注释的规范
*/
6.3 规则声明块内注释
使用 // 注释， // 后面加一个空格，注释要独立一行，避免行末注释
/* bad */
.header {
background-color: #fff; //背景色为白色
}
/* good */
.header {
width: 100%;
height: 30px;
// 头部的颜色为红色-独立一行，避免行末注释
background-color: red;
}
7. 属性书写顺序
建议遵循以下顺序：布局 > 尺寸 > 文本相关 > 视觉效果
布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性(CSS3)：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
ps: 优点是根据浏览器的渲染过程，按这样顺序写可以减少浏览器的回流，提升浏览器渲染dom的性能
.xes {
display: block;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0, 0, 0, .5);
border-radius: 10px;
}
8. 使用BEM
BEM是块（block）、元素（element）、修饰符（modifier）的缩写，利用不同的区块，功能以及样式来给元素命名。这三个部分使用__与--连接（这里用两个而不是一个是为了留下用于块儿的命名）。命名约定的模式如下：
.block { width: 100%; } //代表了更高级别的抽象或组件
.block__element { width: 100%; } //代表 block 的后代，用于形成一个完整的 block 的整体
.block--modifier { width: 100%; } //代表 block 的不同状态或不同版本
9. 浏览器厂商前缀
使用 Autoprefixer 自动添加浏览器厂商前缀，编写 CSS 时不需要添加浏览器前缀，直接使用标准的 CSS 编写。
不使用第三方兼容，对齐，方便阅读
/* bad */
-webkit-transform: rotate(30deg); //-webkit代表苹果的Safari浏览器及谷歌内核识别码
-moz-transform: rotate(30deg); //-moz代表火狐内核识别码
-ms-transform: rotate(30deg); //-ms代表ie内核识别码
-o-transform: rotate(30deg); //-o代表欧朋【opera】内核识别码
/* good */
transform: rotate(30deg); //统一标识语句
10. 不要使用 @import
与 <link> 相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。
替代办法：
使用多个 元素；
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
其他 CSS 文件合并工具；
