良好的代码规范，有利于开发的规范性,代码的可读性,减少错误发生的可能性。
所以下面是我整理出来的一些关于前端的代码规范,欢迎大家补充。
文件全部采用小写方式，多个单词组成时,以中划线分隔。
比如： my-project-name
注:有复数结构时，要采用复数命名法，比如说： images
使用四个空格的 soft tabs — 这是保证代码在各种环境下显示一致的 唯一方式。
嵌套的节点应该缩进（四个空格,也就是使用一个tabs）。
在属性上，使用双引号，不要使用单引号。
不要忽略可选的关闭标签（例如，
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。
字符编码统一采用UTF-8
(1) id
(2) class
(3) name
(4) data-*
(5) src, for, type, href
(6) title, alt
(7) aria-*, role
Class 是为高可复用组件设计的，理论上他们应处在第一位。Id 更加具体并且唯一性，所以他们处在第二位。但为了突出id的重要性， 把id放到了第一位。
Example link
简而言之，不要为 Boolean 属性添加取值。
img标签需要统一加上alt title属性（seo需要）
a标签需要统一加上title属性(seo需要)
使用四个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。
使用组合选择器时，保持每个独立的选择器占用一行。
为了代码的易读性，在声明块的左括号前增加一个空格。
声明块的右括号应该另起一行。
每条声明 : 后应该插入一个空格。
每条声明应该只占用一行来保证错误报告更加准确。
所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错。
逗号分隔的取值，都应该在逗号之后增加一个空格。比如说box-shadow
不要在颜色值 rgb() rgba() hsl() hsla()和 rect()中增加空格，并且不要带有取值前面不必要的 0 (比如，使用 .5 替代 0.5)。
所有的十六进制值都应该使用小写字母，例如 #fff。因为小写字母有更多样的外形，在浏览文档时，他们能够更轻松的被区分开来。
尽可能使用短的十六进制数值，例如使用 #fff 替代#ffffff。
为选择器中的属性取值添加引号，例如input[type="text"]。
不要为 0 指明单位，比如使用 margin: 0; 而不是margin: 0px;。
声明顺序
相关的属性声明应该以下面的顺序分组处理：
1.Positioning(定位相关的属性)
position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100;
2.Box model 盒模型(布局相关的属性)
display: block; float: right; width: 100px; height: 100px;
padding: 10px; margin: 10px;
3.Typographic 排版(字体对齐相关属性)
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5; color: #333; text-align: center;
4.Visual 外观(边框背景相关属性)
background-color: #f5f5f5; border: 1px solid #e5e5e5;
border-radius: 3px;
Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。
盒模型紧跟其后，因为他决定了一个组件的大小和位置。
其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。
为了方便查阅,下面提供一个属性排序表,可以大致参考一下
var order = [ 'position' , 'top' , 'right' , 'bottom' , 'left' , 'z-index' ,
'display' , 'float' , 'width' , 'height' , 'max-width' , 'max-height' ,
'min-width' , 'min-height' , 'padding' , 'padding-top' ,
'padding-right' , 'padding-bottom' , 'padding-left' , 'margin' ,
'margin-top' , 'margin-right' , 'margin-bottom' , 'margin-left' ,
'margin-collapse' , 'margin-top-collapse' ,
'margin-right-collapse' , 'margin-bottom-collapse' ,
'margin-left-collapse' , 'overflow' , 'overflow-x' , 'overflow-y' ,
'clip' , 'clear' , 'font' , 'font-family' ,
'font-size' , 'font-smoothing' , 'osx-font-smoothing' ,
'font-style' , 'font-weight' , 'hyphens' , 'src' , 'line-height' ,
'letter-spacing' , 'word-spacing' , 'color' , 'text-align' ,
'text-decoration' , 'text-indent' , 'text-overflow' ,
'text-rendering' , 'text-size-adjust' , 'text-shadow' ,
'text-transform' , 'word-break' , 'word-wrap' , 'white-space' ,
'vertical-align' , 'list-style' , 'list-style-type' ,
'list-style-position' , 'list-style-image' , 'pointer-events' , 'cursor' ,
'background' , 'background-attachment' , 'background-color' ,
'background-image' , 'background-position' , 'background-repeat' ,
'background-size' , 'border' , 'border-collapse' , 'border-top' ,
'border-right' , 'border-bottom' , 'border-left' , 'border-color' ,
'border-image' , 'border-top-color' , 'border-right-color' ,
'border-bottom-color' , 'border-left-color' , 'border-spacing' ,
'border-style' , 'border-top-style' , 'border-right-style' ,
'border-bottom-style' , 'border-left-style' , 'border-width' ,
'border-top-width' , 'border-right-width' , 'border-bottom-width' ,
'border-left-width' , 'border-radius' , 'border-top-right-radius' ,
'border-bottom-right-radius' , 'border-bottom-left-radius' ,
'border-top-left-radius' , 'border-radius-topright' ,
'border-radius-bottomright' , 'border-radius-bottomleft' ,
'border-radius-topleft' , 'content' , 'quotes' , 'outline' ,
'outline-offset' , 'opacity' , 'filter' , 'visibility' , 'size' , 'zoom' ,
'transform' , 'box-align' , 'box-flex' , 'box-orient' , 'box-pack' ,
'box-shadow' , 'box-sizing' , 'table-layout' , 'animation' ,
'animation-delay' , 'animation-duration' , 'animation-iteration-count' ,
'animation-name' , 'animation-play-state' ,
'animation-timing-function' , 'animation-fill-mode' ,
'transition' , 'transition-delay' , 'transition-duration' ,
'transition-property' , 'transition-timing-function' , 'background-clip' ,
'backface-visibility' , 'resize' , 'appearance' , 'user-select' ,
'interpolation-mode' , 'direction' , 'marks' , 'page' , 'set-link-source' ,
'unicode-bidi' , 'speak' ]
LESS 和 SASS 中的嵌套
避免不必要的嵌套。可以进行嵌套，不意味着你应该这样做。只有在需要给父元素增加样式并且同时存在多个子元素时才需要考虑嵌套。
嵌套不能超过3层
Class 命名
(1) 保持 Class 命名为全小写，可以使用中划线（不要使用下划线和 camelCase 命名）。中划线应该作为相关类的自然间断。(例如，.btn 和 .btn-danger)。
(2) 避免过度使用简写。.btn 可以很好地描述 button，但是 .s 不能代表任何元素。
(3) Class 的命名应该尽量短，也要尽量明确。
(4) 使用有意义的名称；使用结构化或者作用目标相关，而不是抽象的名称。
(5)命名时使用最近的父节点或者父 class 作为前缀
(6) class 对于选中命名.selected;对于hover，支持伪类使用:hover，不支持的使用 .hover，隐藏使用.hide
(7)使用 .js-* classes 来表示行为(相对于样式)，但是不要在 CSS 中包含这些 classes。
// 这是b方法
function b() {
var a = '1';
}
var thisIsMyName;
var goodID;
reportURL
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) { this.name = name }
/**
* [a description] 方法描述
* @param {[type]} num1 [description] 参数1 type表示类型 description参数介绍
* @param {[type]} num2 [description] 参数2 type表示类型 description参数介绍
* @return {[type]} [description] 返回值 type表示返回类型 description返回内容介绍
*/
function a(num1,num2) {
}
function a(num1,num2) {
}
if (true) {
}
这是我罗列的一些常用的前端规范,欢迎大家补充,指出需要纠正的地方。
规范的制定很简单,但是真正能够严格执行起来,才是对一个团队的考验,良好的规范有利于团队的快速开发,定位错误。所以大家还是从现在做起,慢慢去适应这样的规范,这样如果一个团队都是统一规范的话,那么大家阅读彼此的代码就会相对轻松很多了。