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"
};
网友评论