前端代码规范

zoukankan html css js c++ java

前端代码规范
CSS规范

1、书写规范

代码缩进：空四个空格

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

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

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

注释统一用/**/

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

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

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

2、声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：
- Positioning
- Box model
- Typographic
- Visual
3、媒体查询的位置

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

4、带前缀的属性

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

5、属性简写

在需要显示地设置所有值的情况下,使用简写形式：
- padding
- margin
- font
- background
- border
- border-radius
6、选择器
- 对于通用元素使用 class ，这样利于渲染性能的优化。
- 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
- 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
- 只有在必要的时候才将 class 限制在最近的父元素内。
补充说明css 多级class命名及选择器使用

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

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

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

8、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规范

1、Doctype 用标准H5写法，并添加语言代码属性默认用en
```
 
```
<!DOCTYPE html>
```
语言代码参考： https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/
```
```
 
```
2、字符编码设置

<meta charset="utf-8">

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

4、使用语义化标签，一方面提高代码的易读性，另一方面，对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代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。

5、标签属性使用双引号，属性名全部小写，属性要按顺序书写

属性顺序参照：
- 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>

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

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

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>

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

  </select>

7、尽量减少标签嵌套和冗余的父元素，HTML嵌套层数最好不超过四层。

8、自动闭合标签结尾处要使用斜线
```
<img class="avatar" src="imgs/avator.png"/>
```
9、在引入CSS和JS时不需要指明 type，因为 text/css和 text/javascript 分别是他们的默认值

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

JS规范

1、缩进

使用soft tab（4个空格）。

2、单行长度

不要超过80，但如果编辑器开启word wrap可以不考虑单行长度。

3、分号

以下几种情况后需加分号：
- 变量声明
- 表达式
- return
- throw
- break
- continue
- do-while
4、空格

以下几种情况不需要空格：
- 对象的属性名后
- 前缀一元运算符后
- 后缀一元运算符前
- 函数调用括号前
- 无论是函数声明还是函数表达式，'('前不要空格
- 数组的'['后和']'前
- 对象的'{'后和'}'前
- 运算符'('后和')'前
以下几种情况需要空格：
- 二元运算符前后
- 三元运算符'?:'前后
- 代码块'{'前
- 下列关键字前：else, while, catch, finally
- 下列关键字后：if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
- 单行注释'//'后（若单行注释和代码同行，则'//'前也需要），多行注释'*'后
- 对象的属性值前
- for循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格
- 无论是函数声明还是函数表达式，'{'前一定要有空格
- 函数的参数之间
```
 
```
5、空行

以下几种情况需要空行：
- 变量声明后（当变量声明在代码块的最后一行时，则无需空行）
- 注释前（当注释在代码块的第一行时，则无需空行）
- 代码块后（在函数调用、数组、对象中则无需空行）
- 文件最后保留一个空行
6、换行

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

以下几种情况不需要换行：
- 下列关键字后：else, catch, finally
- 代码块'{'前
以下几种情况需要换行：
- 代码块'{'后和'}'前
- 变量赋值后
7、单行注释

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

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

可位于一个代码行的末尾，与代码间隔一个空格。
```
 
```
8、多行注释

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

建议在以下情况下使用：
- 难于理解的代码段
- 可能存在错误的代码段
- 浏览器特殊的HACK代码
- 业务逻辑强相关的代码
9、文档注释

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

建议在以下情况下使用：
- 所有常量
- 所有函数
- 所有类
10、引号

最外层统一使用单引号。

11、变量声明

一个函数作用域中所有的变量声明尽量提到函数首部，用一个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;
    }
}
```
12、函数

无论是函数声明还是函数表达式，'('前不要空格，但'{'前一定要有空格；

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

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

不要给inline function命名；

参数之间用', '分隔，注意逗号后有一个空格。
```
数组、对象
```
对象属性名不需要加引号；

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

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

13、括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else,for, while, do, switch, try, catch, finally, with。
```
// not good
if (condition)
    doSomething();

// good
if (condition) {
    doSomething();
}
```
14、null

适用场景：
- 初始化一个将来可能被赋值为对象的变量
- 与已经初始化的变量做比较
- 作为一个参数为对象的函数的调用传参
- 作为一个返回对象的函数的返回值
不适用场景：
- 不要用null来判断函数调用时有无传参
- 不要与未初始化的变量做比较
15、undefined

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

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

// not good

if (person === undefined) {

...

}

// good

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

...

}

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

16、jshint

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

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

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

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

变量不要先使用后声明；

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

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

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

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

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

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

debugger不要出现在提交的代码里；

数组中不要存在空元素；

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

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

17、杂项

不要混用tab和space；

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

换行符统一用'LF'；

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

行尾不要有空白字符；

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

不允许有空的代码块。

修改补充

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

计算指定选择器的优先级：重新认识CSS的权重
1. 通配选择符的权值 0,0,0,0
2. 标签的权值为 0,0,0,1
3. 类的权值为 0,0,1,0
4. 属性选择的权值为 0,0,1,0
5. 伪类选择的权值为 0,0,1,0
6. 伪对象选择的权值为 0,0,0,1
7. ID的权值为 0,1,0,0
8. important的权值为最高 1,0,0,0
使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS的重复定义，代码冗余。

从上面我们可以得出两个关键的因素：
1. 权值的大小跟选择器的类型和数量有关
2. 样式的优先级跟样式的定义顺序有关
   总结：

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

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

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

关于CSS的执行效率（出自http://www.cnblogs.com/xiaowuzi/p/3726835.html）
1. 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
2. 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。
3. ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
4. 不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
5. 后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
6. CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序：
1. 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）
2. 上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低
3. 详细的介绍大家还可以点击Writing efficient CSS selectors。
参考文档

腾讯前端团队代码规范

https://www.kancloud.cn/digest/code-guide/42603

isobar前端代码规范

https://coderlmn.github.io/code-standards/

关于属性简写的一篇文章

https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

https://www.w3.org/

http://twitter.github.io/recess/

http://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do

https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

命名规范

1、项目命名

项目名全部小写，用破折号做连接符

例如：super-employer

2、目录命名

目录名全部小写

常用目录名：asset , src ,dist , img , css , js , module , model , data , service ....

3、文件命名

文件名全部小写，用下划线做连接符

例如：retina_sprites.css

error_report.html

4、class, id 命名
- 类名使用小写字母，以破折号分隔
- id采用驼峰式命名
- scss中的变量、函数、混合、placeholder采用驼峰式命名
5、js变量命名
- 标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
- 'ID'在变量名中全大写
- 'URL'在变量名中全大写
- 'Android'在变量名中大写第一个字母
- 'iOS'在变量名中小写第一个，大写后两个字母
- 常量全大写，用下划线连接
- 构造函数，大写第一个字母
- jquery对象推荐以'$'开头命名
查看全文

相关阅读:
Docker安装及基本命令
 SpringBoot-获取YAML文件值
 SpringBoot-YAML语法
 Maven仓库
 第一次使用Maven
初始Maven
索引的基本使用与创建选择
 了解索引为什么能快速查找数据
 Mysql的执行顺序与优化分析
 Mysql常用的几种join连接方式

原文地址：https://www.cnblogs.com/coder-zyz/p/6749193.html

前端代码规范

CSS规范

HTML规范

JS规范

修改补充

参考文档

命名规范