手记

前端开发规范

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>

语言属性

网页头部的声明应该是用 还是?

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"     };



作者:小强点中国
链接:https://www.jianshu.com/p/14d51599d147


0人推荐
随时随地看视频
慕课网APP