一个项目应该永远遵循同一套编码规范
不管有多少人共同参与同一项目，确保每一行代码都像是同一个人编写的
相关链接：
前端开发规范：HTML规范
前端开发规范：CSS规范
前端开发规范：JavaScript规范
作为一个处女座，有时候总喜欢给自己加上点条条框框，公司没有针对前端的规范文档，我就自己写一份，便于日后的维护，也避免与其他前端出现冲突，而且也不用在命名时绞尽脑汁起名字了~
年初百度了很多规范，摘取了自己觉得有用的部分存在有道云笔记中，引用已经找不到当初的链接，如有引用，请告诉我，我会将链接附在文末。
语义化命名
id和class的命名时要有效反应元素目的和用途的名称，或其他通用的名称，不要使用表象和晦涩难懂的名称
<!--错误写法-->
<div class="red">
不要随意使用id
id在js是唯一的，不能重复定义，而使用class类选择器却可以重复使用，另外id的权重远高于class，所以id应该按需使用不要滥用。
优化CSS书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
<!--推荐写法-->
.heavy{
position: absolute;
top: 0;
left: 10px;
width: 100px;
color: #008000;
background: url(../img/logo.pg) no-repeat left center;
}
使用CSS缩写属性
如果可以尽可能的使用缩写属性，代码效率和可读性。
去掉小数点前的“0”，省略“0”后面的单位
<!--推荐写法-->
.heavy{
position: absolute;
top: 0;
left: .8rem;
}
连字符CSS选择器命名规范
长名称或词组可以使用中横线来为选择器命名，不建议使用下划线来命名CSS选择器，一是输入的时候少按一个shift键，二是能良好区分JavaScript变量命名（JS变量命名是用"_"）
推荐使用子选择器，避免使用标签名
<!--推荐写法-->
.warp>.heavy{
font-size: 14px;
}
<!--不推荐写法-->
.warp span{
font-size: 14px;
}
私有在前，标准在后
先写带有浏览器私有标志的，后写W3C标准的。
.m-box{
-webkit-box-shadow:0 0 0 #000;
-moz-box-shadow:0 0 0 #000;
box-shadow:0 0 0 #000;
}
注释格式：/* 注释文字 */
- 对选择器的注释统一写在被注释对象的上一行，对属性及值的注释写于分号后。
- 注释内容两端需空格，已确保即使在编码错误的情况下也可以正确解析样式。
- 在必要的情况下，可以使用块状注释，块状注释保持统一的缩进对齐。
- 原则上每个系列的样式都需要有一个注释，言简意赅的表明名称、用途、注意事项等。
/* 块状注释文字
* 块状注释文字
* 块状注释文字
*/
.m-list{width:500px;}
.m-list li{height:20px;line-height:20px;/* 这里是对line-height的一个注释 */overflow:hidden;}
.m-list li a{color:#333;}
/* 单行注释文字 */
.m-list li em{color:#666;}
原则上不允许使用Hack
很多不兼容问题可以通过改变方法和思路来解决，并非一定需要Hack，根据经验你完全可以绕过某些兼容问题。一种合理的结构和合理的样式，是极少会碰到兼容问题的。
由于浏览器自身缺陷，我们无法避开的时候，可以允许使用适当的Hack。
选择器权重
比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数
important->内联->ID->类->标签|伪类|属性选择->伪对象->继承->通配符->继承
选择器顺序
请综合考虑以下顺序依据：
从大到小（以选择器的范围为准）
从低到高（以等级上的高低为准）
从先到后（以结构上的先后为准）
从父到子（以结构上的嵌套为准）
以下仅为简单示范：
/* 从大到小 */
.m-list p{margin:0;padding:0;}
.m-list p.part{margin:1px;padding:1px;}
/* 从低到高 */
.m-logo a{color:#f00;}
.m-logo a:hover{color:#fff;}
/* 从先到后 */
.g-hd{height:60px;}
.g-bd{height:60px;}
.g-ft{height:60px;}
/* 从父到子 */
.m-list{width:300px;}
.m-list .itm{float:left;}
其他
- 每个选择器和属性声明总是使用新的一行
- 16进制颜色代码缩写，如#ffffff写为#fff
- css选择器命名时尽量用英文，尽量不缩写，除非已达成共识
- 选择器、属性和值都使用小写：在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。
- 最后一个值也以分号结尾
- 使用单引号
CSS选择器命名参考
CSS样式表文件命名参考
全局：global.css
全局样式为全站公用，为页面样式基础，页面中必须包含。
结构：layout.css
页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。
私有：style.css
独立页面所使用的样式文件，页面中必须包含。
模块 module.css
产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。
主题 themes.css
实现换肤功能时应用。
补丁 mend.css
基于以上样式进行的私有化修补。
文字 font.css
表单 forms.css
打印 print.css
专栏 columns.css
重置样式表参考
重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}+-
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
参考：淘宝移动端首页重置样式表
@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
html,body{font-family:sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}
q:before,q:after{content:''}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
a:hover{text-decoration:underline}
ins,a{text-decoration:none}
参考：Tmall移动端首页重置样式表
html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html *{outline:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
html,body{font-family:sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}
q:before,q:after{content:''}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
a:hover{text-decoration:underline}
ins,a{text-decoration:none}
