代码规范不可谓不重要。
前言
一手漂亮的代码往往给人眼前一亮的感觉，既利于阅读，也利于维护。而糟糕的代码是会被开发者们所诟病的，所以大多数大中型互联网公司都会制订一套属于自己的代码规范。
对于这些大厂列出的标准性规范，相信大多数开发者已经有了大致的了解，并且能够遵守的。但如果你对这些规范还不甚了解，可以先学习一下阿里巴巴的代码规范airbnb/javascript。
CODE RULES
本篇代码规范抽选自京东前端代码规范。
CSS RULES
代码风格
命名
[强制] ClassName命名一律小写字母，以-连接且不带其他符号。
示例：
/* good */
.footer-author {
width: 100px;
}
/* bad */
.footerAuthor {
width: 100px;
}
/* bad */
.footer_author {
width: 100px;
}
通用
选择器
[建议] 如无必要，不要使用id选择器，尽量使用class选择器。
示例：
/* good */
.footer {
width: 100px;
}
/* bad */
#footer {
width: 100px;
}
属性书写顺序
[强制] 以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
解释：
- Formatting Model 相关属性包括：
position/top/right/bottom/left/float/display/overflow/z-index等 - Box Model 相关属性包括：
border/margin/padding/width/height等 - Typographic 相关属性包括：
font/line-height/text-align/word-wrap等 - Visual 相关属性包括：
background/color/transition/list-style等
文本占位
[强制] 列表中所有的文本节点都必须指定 height 值，确保空内容节点仍然占位。
!important
[建议] 尽量不要使用!important声明。
解释：
大量使用!important会使样式错乱。
z-index
[强制] 将z-index进行分层，必须按照固定层级规则添加z-index。如无必要，不要让z-index超过700
解释：
- 普通元素：0~100
- floating/吸顶/吸底：101～200
- 弹窗：201～300
- loading/分享蒙层：301～400
- 其它：401 ~ 700
值与单位
尺寸 · 单位
[强制] 如无特殊要求，构建稿单位： rem + %。
[强制] 图片尺寸严禁使用奇数值（类似 749x123, 321x120 是不允许出现的）。
[强制] border统一用0.5px，使用scale实现。
[建议] 视觉稿宽度： 375px。
数值
[建议] 当数值为 0 - 1 之间的小数时，省略整数部分的 0。
示例：
/* good */
panel {
opacity: .8;
}
/* bad */
panel {
opacity: 0.8;
}
长度
[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)
示例：
/* good */
body {
padding: 0 5px;
}
/* bad */
body {
padding: 0px 5px;
}
颜色
[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
解释：
带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。
示例：
/* good */
.success {
box-shadow: 0 0 2px rgba(0, 128, 0, .3);
border-color: #008000;
}
/* bad */
.success {
box-shadow: 0 0 2px rgba(0, 128, 0, .3);
border-color: rgb(0, 128, 0);
}
[强制] 颜色值可以缩写时，必须使用缩写形式。
示例：
/* good */
.success {
background-color: #aca;
}
/* bad */
.success {
background-color: #aaccaa;
}
[强制] 颜色值不允许使用命名色值。
解释：
同一种命名色值在不同机型上会有不同展示。
示例：
/* good */
.success {
color: #90ee90;
}
/* bad */
.success {
color: lightgreen;
}
[强制] 颜色值中的英文字符采用小写。
示例：
/* good */
.success {
background-color: #aca;
color: #90ee90;
}
/* bad */
.success {
background-color: #ACA;
color: #90ee90;
}
文本编排
字体
[建议] 如无特殊要求，不要在css中写font-family属性。
解释：
字体样式在许多机型上会失效。
字重
[强制] font-weight 属性必须使用数值方式描述。
解释：
可用数值：400、600、700。
行高
[建议] line-height 在定义文本段落时，应使用数值。并且行高至少要比字号大两个单位。
解释：
行高小于或等于字体号，在部分机型上会出现文字被切割、展示不全的情况。
溢出处理
[强制] 对有行数限制的文本要做文本溢出处理。
变换和动画
[建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。
解释：
见本文，在可能的情况下应选择这样四种变换：
transform: translate(npx, npx);transform: scale(n);transform: rotate(ndeg);opacity: 0..1;
典型的，可以使用 translate 来代替 left 作为动画属性。
示例：
/* good */
.box {
transition: transform 1s;
}
.box:hover {
transform: translate(20px); /* move right for 20px */
}
/* bad */
.box {
left: 0;
transition: left 1s;
}
.box:hover {
left: 20px; /* move right for 20px */
}
兼容性
属性前缀
[建议] 如无必要，使用插件自动编译生成私有前缀，不需要手动加兼容前缀。
OTHER RULES
图片格式
[建议] 色彩丰富的banner等大图使用jpg格式，色彩简单的logo、透明图使用png格式。
图片大小
[强制] 一定要使用二倍图或者三倍图，不要使用一倍图。
音乐
[建议] 开头和结尾做淡入淡出处理。
懒加载
[强制] 对于图片较多较大的页面，必须使用图片懒加载。
注释
[强制] 编写组件时必须使用函数注释标识该组件的输入值与输出值。
示例：
/**
* 图片上传组件普适版
*
* required
* @param {Function} update 图片上传成功回调
*
* not required
* @param {String} imageUrl 上传组件中展示的图片url
* @param {String} listType 图片上传组件类型，默认为"picture-card"
* @param {Number} size 图片限制大小
* @param {String} unit 传入的size的单位，推荐取值：KB、MB、GB。默认为MB。
* @param {Number} width 图片的固定宽度
* @param {Number} heigth 图片的固定高度
* @param {Number} ratio 图片的固定宽高比
* @param {Number} maxHeight 图片的最大高度
* @param {Boolean} allowTwiceWH 是否允许图片实际宽高为限定宽高（width、height）的两倍，默认为否
* @param {Boolean} disabled 是否禁用图片上传，默认为否
* @param {Function} updateProgress 进度条更新回调
* @param {Function} updateFileName 一元解锁上传海报前校验成功更新文件名回调
* @param {String} accept 上传图片类型, 默认值为 'image/png, image/jpeg, image/jpg'
*
* @param {Node} children 自定义的组件内部内容
*/
安全
[强制] URL中可能带有中文或者其他特殊符号的情况下，必须做转义处理。
示例：
dealURL(value) {
// 中文转义
const name = encodeURIComponent(value);
const url = DEFAULT_URL + '&name=' + name;
location.href = url;
}
dealURL('张三');
结语
一名优秀的工程师，不仅仅需要会写一手漂亮的代码，掌握重构手法也是一项重要的品质。所以推荐前端开发者阅读《重构：改善既有代码的设计》（第二版）。
