养成好（dai）的（ma）习（gui）惯（fan）
HTML
- 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
<!DOCTYPE html>
- 为页面添加语言属性
<!DOCTYPE html>
<html lang="zh-CN">
<!-- ... -->
</html>
- 字符编码
<meta charset="UTF-8">
- IE兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
-
尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
-
尽量不使用行内样式
-
属性的顺序：常用的属性靠前例如
class，id；boolean类型的属性，不用赋值，放在最后。
CSS
-
用四个空格来代替制表符（tab）
-
为选择器分组时，将单独的选择器单独放在一行。
-
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
-
声明块的右花括号应当单独成行。
-
为了获得更准确的错误报告，每条声明都应该独占一行。
-
所有声明语句都应当以分号结尾。
-
对于属性值或颜色参数，省略小于1的小数前面的0（例如，.5 代替 0.5；-.5px 代替 -0.5px）。
-
十六进制值应该全部小写，尽量使用简写的形式，例如，#fff 代替#ffffff。
-
为选择器中的属性添加双引号，例如，
input[type="text"]。 -
避免为
0值指定单位，例如，用margin: 0;代替margin: 0px;。 -
伪元素使用
:的写法，如不需要兼容IE8及IE8以下浏览器，可使用::替换:的写法。例如::before替换:before。 -
为每个需要控制的元素节点，添加对应的
class进行控制，而不是使用元素选择器来进行控制，因为CSS的解释编译是从右往左进行的。 -
关于命名
-
class名称中只使用小写字符和减号-，—不使用下划线，也使用驼峰命名法—。 - 文件命名同上
- 使用有组织的或目的明确的名称，名称应当尽可能短，并且意义明确。例如：
- 尽量全部用英语命名，不用英语中间参杂拼音，不会的单词可以Google。
-
-
使用LESS 或 SCSS 编写的时候不需要带前缀的属性声明，因为在对其进行编译的时候使用gulp-autoprefixer可自动为编译后的CSS加上对应的浏览器前缀。
建议css代码结构
/*单个选择器*/
selector {
/*...*/
}
/*多个选择器，每个选择器都换行*/
selector1,
selector2,
selector3 {
/*...*/
}
CSS模块化，以及预编译语言的使用（LESS OR SCSS）
-
布局类通用模块
- grid module，网格模块
- media module，媒体类数据展示
- slide module，轮播模块
- list module，列表类模块
-
工具类模块，例如
/*清除浮动*/ .clear-fix { *zoom: 1; } .clear-fix::before, .clear-fix::after { display: table; clear: both; content: ""; } .clearfix::after { clear: both; } -
LESS OR SCSS 的使用
-
使用构建工具，如gulp来进行编译。
-
编写样式的时候无需加浏览器前缀。
使用gulp-autoprefixer
browserslist
-
JS
-
命名
变量、函数参数：使用Camel（驼峰）命名的方式。
var isLogin = function(accountId) { // do something };常量：使用 全部字母大写，单词间下划线分隔 的命名方式。
var GLOBAL_CONFIG = {};函数：使用 Camel命名法。
function testFunc() { // do something }类、构造函数、枚举变量 使用 Pascal（帕斯卡）命名法
// class function TestClass() { // do something } // 构造函数 function TestClass(text) { this.text = text; } // 枚举变量：枚举属性全部采用大写加下划线的方式 var Status = { DEFAULT: 0, NEW: 1, UPDATE: 2, READONLY: 3 };boolean类型的变量使用is或has开头var isLoaded = true; var hasPermission = false;jquery对象以$开头var $elem = $(selector); -
注释
单行注释
必须独占一行。//后跟一个空格，缩进与下一行被注释说明的代码一致。多行注释 避免使用
/*...*/这样的多行注释。有多行注释内容时，使用多个单行注释。文档化注释 使用
/**...*/形式的块注释中。/** * 函数描述 * * @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 }; }
网友评论