前端代码规范

时间 2019-11-08

标签前端代码规范繁體版

原文原文链接

CSS规范

一、书写规范javascript

代码缩进：空四个空格css

选择器单独占一行，每一个属性及属性值占一行，属性结束用分号； html

{ } 上下不要加空行，} 单独占一行，每组属性之间空一行前端

按组件块编写样式，并添加相应的注释html5

注释统一用/**/java

对于属性值或颜色参数，小于 1 的省略前面的 0jquery

十六进制值应该所有小写，例如，#fff。在扫描文档时，小写字符易于分辨，由于他们的形式更易于区分。git

避免为 0 值指定单位，例如，用 margin: 0; 代替margin: 0px; github

二、声明顺序web

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning
Box model
Typographic
Visual

三、媒体查询的位置

将媒体查询放在尽量相关规则的附近。不要将他们打包放在一个单同样式文件中或者放在文档底部。

四、带前缀的属性

当使用特定厂商的带有前缀的属性时，经过缩进的方式，让每一个属性的值在垂直方向对齐，这样便于多行编辑

五、属性简写

在须要显示地设置全部值的状况下,使用简写形式：

padding
margin
font
background
border
border-radius

六、选择器

对于通用元素使用 class ，这样利于渲染性能的优化。
对于常常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
选择器要尽量短，而且尽可能限制组成选择器的元素个数，建议不要超过 3 。
只有在必要的时候才将 class 限制在最近的父元素内。

补充说明css 多级class命名及选择器使用

简单的说就是最外层作命名空间，子集加前缀，css加惟一父级名(设置专有样式时能惟一选择就好了，还得灵活运用)，选择器最好不要超过三层嵌套

七、class命名

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（相似于命名空间）（例如，.btn 和 .btn-danger）。
避免过分任意的简写。.btn 表明 button，可是 .s不能表达任何意思。（出一套经常使用简写）
class 名称应当尽量短，而且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本（base） class 做为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），而且不要将这些 class 包含到 CSS 文件中。

附加说明，常见缩写及命名，下载查看：

HTML DIV+CSS 命名规范大全.txt

八、font-family默认设置

font-family: "PingFangSC", "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;

HTML规范

一、Doctype 用标准H5写法，并添加语言代码属性默认用en

<!DOCTYPE html>

语言代码参考： https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/

二、字符编码设置

三、嵌套缩进，四个空格 ,代码结构更清晰些

四、使用语义化标签，一方面提升代码的易读性，另外一方面，对seo比较友好

以下是经常使用H5的一些语义化标签

header 元素

表明“网页”或“section”的页眉。

一般包含h1-h6元素或hgroup，做为整个页面或者一个内容块的标题。

也能够包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。

footer元素

footer元素表明“网页”或“section”的页脚，一般含有该节的一些基本信息，譬如：做者，相关文档连接，版权资料。若是footer元素包含了整个节，那么它们就表明附录，索引，提拔，许可协议，标签，类别等一些其余相似信息

hgroup元素

hgroup元素表明“网页”或“section”的标题，当元素有多个层级时，该元素能够将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

nav元素

nav元素表明页面的导航连接区域。用于定义页面的主要导航部分。

aside元素

aside元素被包含在article元素中做为主要内容的附属信息部分，其中的内容能够是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）

section元素

section元素表明文档中的“节”或“段”，“段”能够是指一篇文章里按照主题的分段；“节”能够是指一个页面里的分组。

section一般还带标题，虽然html5中section会自动给标题h1-h6降级，可是最好手动给他们降级

article元素

article元素最容易跟section和div容易混淆，其实article表明一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。

五、标签属性使用双引号，属性名所有小写，属性要按顺序书写

属性顺序参照：

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
required, readonly, disabled

补充说明：

role属性，加强语义性，一般用于说明一个组件的用途，而aria-*的做用就是描述这个tag在可视化的情境中的具体信息

如： <div role="button" aria-checked="checked">这是一个按钮</div>

这两个属性说明这个是一个按钮，而且状态是选中状态

六、布尔类型的属性不用赋值如disable , checked

<select>

<option value="1" selected>1</option>

</select>

七、尽可能减小标签嵌套和冗余的父元素，HTML嵌套层数最好不超过四层。

八、自动闭合标签结尾处要使用斜线

<img class="avatar" src="imgs/avator.png"/>

九、在引入CSS和JS时不须要指明 type，由于 text/css和 text/javascript 分别是他们的默认值

十、在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽可能避免这种状况的出现

JS规范

一、缩进

使用soft tab（4个空格）。

二、单行长度

不要超过80，但若是编辑器开启word wrap能够不考虑单行长度。

三、分号

如下几种状况后需加分号：

变量声明
表达式
return
throw
break
continue
do-while

四、空格

如下几种状况不须要空格：

对象的属性名后
前缀一元运算符后
后缀一元运算符前
函数调用括号前
不管是函数声明仍是函数表达式，'('前不要空格
数组的'['后和']'前
对象的'{'后和'}'前
运算符'('后和')'前

如下几种状况须要空格：

二元运算符先后
三元运算符'?:'先后
代码块'{'前
下列关键字前：else, while, catch, finally
下列关键字后：if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
单行注释'//'后（若单行注释和代码同行，则'//'前也须要），多行注释'*'后
对象的属性值前
for循环，分号后留有一个空格，前置条件若是有多个，逗号后留一个空格
不管是函数声明仍是函数表达式，'{'前必定要有空格
函数的参数之间

五、空行

如下几种状况须要空行：

变量声明后（当变量声明在代码块的最后一行时，则无需空行）
注释前（当注释在代码块的第一行时，则无需空行）
代码块后（在函数调用、数组、对象中则无需空行）
文件最后保留一个空行

六、换行

换行的地方，行末必须有','或者运算符；

如下几种状况不须要换行：

下列关键字后：else, catch, finally
代码块'{'前

如下几种状况须要换行：

代码块'{'后和'}'前
变量赋值后

七、单行注释

双斜线后，必须跟一个空格；

缩进与下一行代码保持一致；

可位于一个代码行的末尾，与代码间隔一个空格。

八、多行注释

最少三行, '*'后跟一个空格，具体参照右边的写法；

建议在如下状况下使用：

难于理解的代码段
可能存在错误的代码段
浏览器特殊的HACK代码
业务逻辑强相关的代码

九、文档注释

各种标签@param, @method等请参考usejsdoc和JSDoc Guide；

建议在如下状况下使用：

全部常量
全部函数
全部类

十、引号

最外层统一使用单引号。

十一、变量声明

一个函数做用域中全部的变量声明尽可能提到函数首部，用一个var声明，不容许出现两个连续的var声明。

function doSomethingWithItems(items) { // use one var var value = 10, result = value + 10, i, len; for (i = 0, len = items.length; i < len; i++) { result += 10; } }

十二、函数

不管是函数声明仍是函数表达式，'('前不要空格，但'{'前必定要有空格；

函数调用括号前不须要空格；

当即执行函数外必须包一层括号；

不要给inline function命名；

参数之间用', '分隔，注意逗号后有一个空格。

数组、对象

对象属性名不须要加引号；

对象以缩进的形式书写，不要写在一行；

数组、对象最后不要有逗号。

1三、括号

下列关键字后必须有大括号（即便代码块的内容只有一行）：if, else,for, while, do, switch, try, catch, finally, with。

// not good if (condition) doSomething(); // good if (condition) { doSomething(); }

1四、null

适用场景：

初始化一个未来可能被赋值为对象的变量
与已经初始化的变量作比较
做为一个参数为对象的函数的调用传参
做为一个返回对象的函数的返回值

不适用场景：

不要用null来判断函数调用时有无传参
不要与未初始化的变量作比较

1五、undefined

永远不要直接使用undefined进行变量判断；

使用typeof和字符串'undefined'对变量进行判断。

// not good

if (person === undefined) {

...

}

// good

if (typeof person === 'undefined') {

...

}

说明：防止对未定义的变量进行undefined判断出错

1六、jshint

用'===', '!=='代替'==', '!='；

for-in里必定要有hasOwnProperty的判断；

不要在内置对象的原型上添加方法，如Array, Date；

不要在内层做用域的代码里声明了变量，以后却访问到了外层做用域的同名变量；

变量不要先使用后声明；

不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；

不要在同个做用域下声明同名变量；

不要在一些不须要的地方加括号，例：delete(a.b)；

不要使用未声明的变量（全局变量须要加到.jshintrc文件的globals属性里面）；

不要声明了变量却不使用；

不要在应该作比较的地方作赋值；

debugger不要出如今提交的代码里；

数组中不要存在空元素；

不要在循环内部声明函数；

不要像这样使用构造函数，例：new function () { ... }, new Object；

1七、杂项

不要混用tab和space；

不要在一处使用多个tab或space；

换行符统一用'LF'；

对上下文this的引用只能使用'_this', 'that', 'self'其中一个来命名；

行尾不要有空白字符；

switch的falling through和no default的状况必定要有注释特别说明；

不容许有空的代码块。

修改补充

关于CSS的权重（出自http://www.cnblogs.com/xiaowuzi/p/3726835.html）

计算指定选择器的优先级：从新认识CSS的权重

通配选择符的权值 0,0,0,0
标签的权值为 0,0,0,1
类的权值为 0,0,1,0
属性选择的权值为 0,0,1,0
伪类选择的权值为 0,0,1,0
伪对象选择的权值为 0,0,0,1
ID的权值为 0,1,0,0
important的权值为最高 1,0,0,0

使用的规则也很简单，就是 选择器的权值加到一块儿，大的优先；若是权值相同，后定义的优先 。虽然很简单，但若是书写的时候没有注意，很容易就会致使CSS的重复定义，代码冗余。

从上面咱们能够得出两个关键的因素：

权值的大小跟选择器的类型和数量有关
样式的优先级跟样式的定义顺序有关

总结：

比较同一级别的个数，数量多的优先级高，若是相同即比较下一级别的个数 ，至于各级别的优先级，你们应该已经很清楚了，就是：

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

这也就解释了为何11个标签的定义会比不上1个类的定义，1个类加11个标签会比不上2个类的权重高。

关于CSS的执行效率（出自http://www.cnblogs.com/xiaowuzi/p/3726835.html）

样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其余选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者由于不匹配而退出。
若是你很是在乎页面的性能那千万别使用CSS3选择器。实际上，在全部浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。
ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
不要tag-qualify （永远不要这样作 ul#main-navigation { } ID已是惟一的，不须要Tag来标识，这样作会让选择器变慢。）
后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
CSS3的效率问题（CSS3选择器（好比 :nth-child）可以漂亮的定位咱们想要的元素，又能保证咱们的CSS整洁易读。可是这些神奇的选择器会浪费不少的浏览器资源。）

Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低作了一个排序：

1.id 选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul > li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）
上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低
详细的介绍你们还能够点击Writing efficient CSS selectors。