Web前端编码规范

来源：互联网发布：python array append 编辑：程序博客网时间：2024/05/17 04:12

通用规范

结构、样式、行为分离

确保结构(HTML)、样式(CSS)、行为(js)相分离，即以外部引入的方式引用css文件和js文件，避免内联和行内css、js代码

引入css文件和js文件不需要指定type属性，因为text/css和text/javascript分别是它们的默认值

js文件应当放在页面末尾

文件编码

文件使用无 BOM 的 UTF-8 编码

缩进

使用2个空格缩进，为什么用2个空格可参考http://blog.csdn.net/wozaixiaoximen/article/details/47265023

在所有的IDE工具中，都可以设置1个Tab键转换成2个空格，这样就可以敲一个Tab键输出2个空格

省略协议头

省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )，这样可以同时兼容 http 和 https 。其它协议（如ftp 等）的 URL 不省略

<!-- 省略http/https协议头 --><img src="//www.xxx.com/x.jpg">

项目名、目录名和文件名

项目名、目录名和文件名全部采用小写方式，多个单词之间以中划线分隔

注释

HTML 注释

模块注释

<!-- 文章列表列表模块 --><div class="article-list">...</div>

区块注释

<!--@name: Drop Down Menu@description: Style of top bar drop down menu.@author: Ashu(Aaaaaashu@gmail.com)-->

CSS 注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔

/* ==========================================================================   组件块 ============================================================================ *//* 子组件块 ============================================================================ */.selector {  padding: 15px;  margin-bottom: 15px;}/* 子组件块 ============================================================================ */.selector-secondary {  display: block; /* 注释*/}.selector-three {  display: span;}

JavaScript 注释

单行注释必须独占一行。//后跟一个空格，缩进与下一行被注释说明的代码一致

避免使用/*...*/这样的多行注释。有多行注释内容时，使用多个单行注释，这个可参考jquery源码的注释。//注释上一行是空行，紧临下一行代码

函数/方法注释

/** * 函数描述 * * @param {string} p1 参数1的说明 * @param {string} p2 参数2的说明，比较长 *     那就换行了. * @param {number=} p3 参数3的说明（可选） * @return {Object} 返回值描述 */function foo(p1, p2, p3) {    var p3 = p3 || 10;    return {        p1: p1,        p2: p2,        p3: p3    };}

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息

/** * @fileoverview Description of file, its uses and information * about its dependencies. * @author user@meizu.com (Firstname Lastname) * Copyright 2015 Meizu Inc. All Rights Reserved. */

HTML 规范

文档声明

使用HTML5文档声明。”DOCTYPE”大小写均合法，但建议大写，这样看上去更专业

<!DOCTYPE html>

大小写

所有元素和属性名都小写

指定 lang 属性

为文档设置正确的语言，将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则

“en”代表英文；”zh-CN”代表简体中文

<html lang="zh-CN">

字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式

使用UTF-8编码，就不需要使用类似 — 、 ” 和 ☺ 等的实体引用

UTF-8大小写均合法，建议大写

<meta charset="UTF-8">

属性

属性值使用双引号

属性值不管使用双引号还是单引号，浏览器都会解析成双引号，所以如果使用单引号的属性值中含有双引号就会出错

布尔型属性不用赋值

属性顺序

属性应当按照以下给出的顺序依次排列，确保代码的易读性

(1) id(2) class(3) name(4) data-*(5) src, for, type, href, value, max-length, max, min, pattern(6) placeholser, title, alt(7) aria-*, role(8) required, readonly, disabled

启用 IE Edge 模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

行末不要有空格

id 和 class

class 用作样式，id 作为 Javascript hook

id 和 class 的名称一律小写，多个单词以中划线（不是下划线）连接

名称反映功能

提供元信息

    <meta name="description" content="">    <meta name="keywords" content="">    <meta name="author" content="">

使用语义标签

favicon

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：
(1) 在 Web Server 根目录放置 favicon.ico 文件。
(2) 使用 link 指定 favicon：<link rel="shortcut icon" href="path/faviconName.ico">

HTML模板

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>Title</title>    <meta name="description" content="">    <meta name="keywords" content="">    <meta name="author" content="">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="shortcut icon" href="path/to/favicon.ico">  </head>  <body>  </body></html>

CSS 规范

排版

每个选择器单独占一行

每条声明独占一行

这是为了获得更准确的错误报告。对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行

声明块的左花括号前添加一个空格

声明块的右花括号应当独占一行

声明语句的:后应该插入一个空格

声明语句以分号结尾

最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错

以逗号分隔的属性值，逗号后面插入一个空格

不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。#div {  background-color: rgba(0,0,0,.5);  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;}

省略小于 1 的小数前面的 0

十六进制值全部小写

使用简写形式的十六进制值

为选择器中的属性添加双引号

例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。

避免为 0 值指定单位

声明顺序

(1) Positioning
(2) Box model
(3) Typographic
(4) Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面

/* 相关的属性声明应当归为一组，并按照下面的顺序排列 */.declaration-order {  /* Positioning */  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 100;  /* Box model */  display: block;  box-sizing: border-box;  width: 100px;  height: 100px;  padding: 10px;  border: 1px solid #e5e5e5;  border-radius: 3px;  margin: 10px;  float: right;  overflow: hidden;  /* Typographic */  font: normal 13px "Helvetica Neue", sans-serif;  line-height: 1.5;  text-align: center;  /* Visual */  background-color: #f5f5f5;  color: #fff;  opacity: .8;  /* Other */  cursor: pointer;}

媒体查询

将媒体查询放在相关规则的附近

不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

厂商前缀

当使用带特定厂商前缀的属性时，属性的值垂直对齐

.selector {  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);          box-shadow: 0 1px 2px rgba(0,0,0,.15);}

选择器的性能

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

代码组织

(1) 以组件为单位组织代码(2) 制定一个一致的注释层级结构(3) 使用一致的空白来分割代码块，这样做在查看大的文档时更有优势

JavaScript规范

命名

变量名、函数名、参数名、类的方法 / 属性使用小驼峰命名

私有属性、变量和方法以下划线 _ 开头

常量、枚举的属性使用全部字母大写，单词间下划线分隔的命名方式

类、枚举变量使用大驼峰命名

其他

没有比这个更好的了：https://github.com/airbnb/JavaScript
这个是中文版: https://github.com/yuche/javascript

0 0