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有效性与语义化
- 使用符合 HTML5 规范的标签,不允许使用废弃的标签,如
<font>
、<center>
等。 - 根据 HTML 各元素设计的用途使用他们。这事关可访性、重用以及代码效率,例如
h1-h6
用于标题,<p>
用于段落,<a>
用于链接。 - 使用 HTML5 语义化标签。
HTML5 element list
关注分离:结构、表现、行为分离
严格保持结构 (标记),表现 (样式),和行为 (脚本)分离, 并尽量让三者之间的交互保持在最低限度。
- 确保文档和模板只包含 HTML 结构, 所有表现都放到样式表里,所有行为都放到脚本里;
- 尽量将脚本和样式合并到一个文件,减少外链。
省略样式表和脚本的 type 属性
使用 CSS 的样式表、使用 JavaScript 的脚本都不需要添加 type
属性。HTML5 默认按照 text/css
及 text/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 代码格式
属性声明顺序
推荐的样式编写顺序:
- Positioning
- Box model
- Typographic
- 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"
};