前端开发规范

HTML/CSS 通用规则

编码规则

省略外链资源 URL 协议部分
省略外链资源(图片及其它媒体资源)URL 中的 http / https 协议,使 URL 成为相对地址,避免 Mixed Content 问题,减小文件字节数。
其它协议(ftp 等)的 URL 不省略。

<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

避免使用层级过深的文件夹,以提高文件查找效率、减小文件体积。

代码格式####

使用小写字母

<!-- Recommended -->
<img src="google.png" alt="Google">

<!-- Not recommended -->
<A HREF="/">Home</A>

删除行尾空格

HTML风格指南

编码规则

*文档类型(DTD)使用 HTML5

<!DOCTYPE html>

语言属性

网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"?

head 头标签

HTML head 头标签
常用meta整理

HTML有效性与语义化

  • 使用符合 HTML5 规范的标签,不允许使用废弃的标签,如 <font><center>等。
  • 根据 HTML 各元素设计的用途使用他们。这事关可访性、重用以及代码效率,例如h1-h6用于标题,<p> 用于段落,<a>用于链接。
  • 使用 HTML5 语义化标签。
    HTML5 element list

关注分离:结构、表现、行为分离

严格保持结构 (标记),表现 (样式),和行为 (脚本)分离, 并尽量让三者之间的交互保持在最低限度。

  • 确保文档和模板只包含 HTML 结构, 所有表现都放到样式表里,所有行为都放到脚本里;
  • 尽量将脚本和样式合并到一个文件,减少外链。

省略样式表和脚本的 type 属性

使用 CSS 的样式表、使用 JavaScript 的脚本都不需要添加 type 属性。HTML5 默认按照 text/csstext/javascript 解析,兼容较老的浏览器。

<!-- Recommended -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">

<!-- Not recommended -->
<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css">

<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Not recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>

布尔值属性

HTML5 规范中 disabled、checked、selected 等属性不用设置值

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
    <option value="1" selected>1</option>
</select>

HTML代码格式

基础格式

  • 每个块级、列表、表格元素单独占一行,每个子元素都相对父元素缩进。
  • 纯文本在 HTML 标签结束之前不要换行。
  • HTML 属性值使用双引号。

CSS风格指南

编码规则

不要使用 @import
<link> 相比,@import 要慢很多,不光增加额外的请求数,还会导致不可预料的问题。
ID、Class 命名
ID、Class 使用语义化、通用的命名方式。

  • 只允许使用的小写字母、连字符、数字;
  • 应该从 ID 和 Class 的名字上就能看出这元素是干嘛用的(角色、功能、状态),而不是表象(颜色、位置等)或模糊不清的命名;
  • 表明、反映元素作用的名字易于理解,且后期修改的可能性小;
  • 对与同级元素相比没有特殊的意义的元素使用通用的命名;
  • 使用功能性或通用的名字可以减少不必要的文件修改。

避免元素选择器和 ID、Class 叠加使用
出于性能考量,在没有必要的情况下避免元素选择器叠加 ID、Class 使用。
元素选择器和 ID、Class 混合使用也违反关注分离原则。如果HTML标签修改了,就要再去修改 CSS 代码,不利于后期维护。
属性值为 0 时省略单位

margin: 0; 
padding: 0;

使用rem作为字号、长度单位
使用 px对可访性会造成一定的问题,em 则随着上下文不断变化,计算较为繁杂。

  • 推荐使用 rem:Font sizing with rem
  • 需要 1px 级别精准定位的,仍然使用 px
  • 需要根据字号变化的(如 padding、margin 等)场景使用可以使用 em,较少不必要的代码。

根据项目在 ID、Class 前面加上特定前缀(命名空间)
命名空间可以防止命名冲突,方便维护(查找和替换)。

.backend-xxx {}

使用连字符 - 作为 ID、Class 名称界定符
CSS 中不要驼峰命名法和下划线。
元素在页面中仅仅出现一次的,应该使用 ID,否则使用 Class。

CSS 代码格式

属性声明顺序
推荐的样式编写顺序:

  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;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

字体名称
字体名称请映射成对应的英文名,例如:黑体(SimHei) 、宋体(SimSun) 、微软雅黑(Microsoft Yahei)。
如果字体名称中有空格,则必须加引号。

JavaScript 语言规范

变量使用前必须使用 var 声明

标准特性优先

优先使用原生的方法,而不是自行封装的非标准接口。####

总是使用 === 比较符

使用 == 比较符可以让令人郁闷的bug消失于无形。使用严格的 === 比较符不会执行类型强制转换,从而能够严格地评估两个对象之间的差别。

禁止修改内置对象的原型

如 Object.prototype、Array.prototype、Function.prototype 等。

用 Array 和 Object 字面量代替 Array 和 Object 构造函数

/* Recommend */
var arr = [x1, x2, x3],
    obj = {
        a: 0,
        b: 1,
        c: 2
    };
/* Not Recommend */
var arr = new Array(x1, x2),
    obj = new Object();

拼接字符串

一般情况使用 + 操作符拼接字符串。如果存在大量的字符串拼接,推荐采用数组 join() 拼接字符串。

JavaScript 编码风格

命名方式

常量
使用全大写字母,并用下划线分隔单词,形如CONST_NAME_LIKE_THIS
变量
变量采用小驼峰式命名,如 myVar
类名
采用大驼峰式(帕斯卡命名法)命名,如 MyClass。
私有变量
私有属性、变量和方法以下划线 _ 开头,形如 _privateMethod。
变量前置声明

var name = 'My Name',
    future;

参考《Javascript语言精粹》

明确作用域

任何时候都要明确作用域,以提高可移植性和清晰度。例如,不要依赖作用域链中的 window 对象。

函数调用不要传输太多的参数

/* Not Recommend */
function greet(name, language, age, gender, hairColour, eyeColour) {
   alert(name);
}

代码格式

空行
使用空行来划分一组逻辑上相关联的代码片段。文件末尾空一行。
二元和三元操作符
操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。如果一行放不下, 还是按照上述的缩进风格来换行。
圆括号
圆括号在 JavaScript 中有两种作用,一种表示调用函数,一种表示不同的值的组合。只在必要的时候使用圆括号。

对于一元操作符(如delete、typeof、void),或是在某些关键词(如 return、throw、case、new)之后,不要使用括号。
字符串
字符串使用单引号,只有 JSON 中的字符串属性值使用双引号。
字符串中的 HTML 属性使用双引号。

/* Recommended */
var string = 'this is a string',
    object = {
        str: "this is a JSON string"
    };
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容