还在担心别人难以读懂你的前端代码?

前言:

良好的代码规范，有利于开发的规范性,代码的可读性,减少错误发生的可能性。
所以下面是我整理出来的一些关于前端的代码规范,欢迎大家补充。

1.文件命名规范

文件全部采用小写方式，多个单词组成时,以中划线分隔。
比如： my-project-name
注:有复数结构时，要采用复数命名法，比如说： images

2.HTML相关规范

• 使用四个空格的 soft tabs — 这是保证代码在各种环境下显示一致的 唯一方式。

• 嵌套的节点应该缩进（四个空格,也就是使用一个tabs）。

• 在属性上，使用双引号，不要使用单引号。

• 不要忽略可选的关闭标签（例如，</div> 和</body>）。

• 通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。

• 字符编码统一采用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放到了第一位。

<a id="..." class="..." data-modal="toggle" href="#"> Example link </a>

• Boolean 属性
  元素中 Boolean 属性的存在表示取值 true，不存在则表示取值 false。
  如:

<input type="button" disabled />

简而言之，不要为 Boolean 属性添加取值。

• img标签需要统一加上alt title属性（seo需要）

• a标签需要统一加上title属性(seo需要)

---

3.CSS相关规范

• 使用四个空格的 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。

• 选择器
  (1)使用 classes 而不是通用元素标签来优化渲染性能。
  (2)避免在经常出现的组件中使用一些属性选择器 (例如，[class^="..."])。浏览器性能会受到这些情况的影响。
  (3)减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在 3 个以内。
  (4)只在必要的情况下使用后代选择器 (例如，没有使用带前缀 classes 的情况).

---

4.JavaScript相关规范

(1)分号,单行长度

• 声明之后一律以分号结束， 不可以省略
• 单行长度，理论上不要超过80列，不过如果编辑器开启 soft wrap 的话可以不考虑单行长度

(2)空格

• 赋值左右2边加上空格
• 逻辑块之间加空行增加可读性
• 单行或多行注释前加

// 这是b方法
function b() {
    var a = '1';
}

(3)变量命名

• 标准变量采用驼峰标识 (除了下面列出来的,其余都采用此标准)

var thisIsMyName;

• 使用的ID的地方一定全大写

var goodID;

• 使用的URL的地方一定全大写

reportURL

• 涉及Android的，一律大写第一个字母

var AndroidVersion;

• 涉及iOS的，一律小写第一个，大写后两个字母

var iOSVersion;

• 常量采用大写字母，下划线连接的方式

var MAX_COUNT = 10;

• 构造函数，大写第一个字母

function Person(name) { this.name = name }

(4)字符常量

• js中出现的字符常量一律采用''单引号的形式

(5)注释

• 单行注释(一般用于变量的解释)
• 文档注释(方法一律采用文档注释)

  /**
   * [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) {

  }

(6)括号对齐

• 左括号加载逻辑后面,右括号另起一行

function a(num1,num2) {

}
if (true) {

}

• 花括号必须要， 即使内容只有一行
• 涉及 if for while do...while try...catch...finally 的地方都必须使用花括号

(7)比较运算符

• 完全避免 == != 的使用， 用严格比较条件 === !==

(8)杂项

• 尽量避免全局变量,全局函数声明

---

结语:

这是我罗列的一些常用的前端规范,欢迎大家补充,指出需要纠正的地方。
规范的制定很简单,但是真正能够严格执行起来,才是对一个团队的考验,良好的规范有利于团队的快速开发,定位错误。所以大家还是从现在做起,慢慢去适应这样的规范,这样如果一个团队都是统一规范的话,那么大家阅读彼此的代码就会相对轻松很多了。