1.项目、目录及文件命名
1.1 全部采用小写方式， 以下划线分隔。
- 项目命名： 用项目对应的英文单词命名。例：my_project_name
- 目录命名： 有复数结构时，要采用复数命名法。例：scripts, styles, images, data_models
- HTML文件命名： 例：login.html, error_report.html
- CSS, SCSS文件命名： 例：base.css, pagename.css
- JS文件命名： 例：jquery.2.2.3.min.js, pagename.js
2.HTML
2.1 语法
- 缩进使用soft tab（4个空格）
- 嵌套的节点应当缩进一次
- 在属性的定义上，使用双引号，不要使用单引号
- 属性名全小写，用中划线做分隔符
- 不要在自动闭合标签结尾处使用斜线
- 不要忽略可选的关闭标签，例： </li> 和 </body>
2.2 HTML5 doctype、lang属性、字符编码、IE兼容模式
- 在页面开头使用这个简单地 doctype 来启用标准模式，使其在每个浏览器中尽可能一致的展现
- 建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
- 通过声明一个明确的字符编码，让浏览器快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。
- IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。最好是设置为 edge mode ，从而通知 IE 采用其所支持的最新的模式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
</html>
2.3 引入css,js文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
<!-- External CSS -->
<link rel="stylesheet" href="main.css">
<!-- External JS -->
<script src="main.js"></script>
2.4 属性顺序、boolean属性
- class
- id
- name
- data-*
- src, for, type, href, value , max-length, max, min, pattern
- placeholder, title, alt
- aria-*, role
- required, readonly, disabled
class 用于标识高度可复用组件，所以应处在第一位；
id 更加具体且应该尽量少使用，所以将它放在第二位。
boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；
boolean属性的存在表示取值为true，不存在则表示取值为false。例：<input type="checkbox" value="1" checked>
2.5 JS生成标签、减少标签数量
在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。
编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。
3.CSS, SCSS
3.1 语法
- 缩进，使用soft tab（4个空格）。
- 为选择器分组时，将单独的选择器单独放在一行。
- 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
- 声明块的右花括号应当单独成行。
- 每条声明语句的 : 后应该插入一个空格。
- 为了获得更准确的错误报告，每条声明都应该独占一行。
- 所有声明语句都应当以分号结尾。
- 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
- 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
- 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
- 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
- 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
- 为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
- 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
3.2 属性声明顺序
- Positioning（定位，如position，top，z-index）
- Box model（盒模型，如display，box-sizing，width，border）
- Typographic（排版，如font，line-height，text-align）
- Visual（视觉，如background，color,opacity）
- Other（其他，如cursor）
3.3 选择器
- 对于通用元素使用 class ，这样利于渲染性能的优化。
- 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响
- 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3
4.JavaScript
4.1 命名规则
变量命名：
- 驼峰式命名。前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)
- 尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型
- 常量全大写，用下划线连接
- 构造函数，大写第一个字母
- jquery对象必须以'$'开头命名
var firstName = "John";
var MAX_COUNT = 10;
var $body = $('body');
函数命名：
- 前缀应当为动词。命名建议：可使用常见动词约定
| 动词 | 含义 |
|---|---|
| can | 判断是否可执行某个动作(权限) |
| has | 判断是否含有某个值 |
| is | 判断是否为某个值 |
| get | 获取某个值 |
| set | 设置某个值 |
| load | 加载某些数据 |
4.2 函数
- 无论是函数声明还是函数表达式，'('前不要空格，但'{'前一定要有空格
- 函数调用括号前不需要空格
- 立即执行函数外必须包一层括号
- 不要给inline function命名
- 参数之间用', '分隔，注意逗号后有一个空格
4.3 数组、对象
- 对象属性名不需要加引号；
- 冒号与属性值间有个空格。
- 对象以缩进的形式书写，不要写在一行；
- 数组、对象最后不要有逗号。
- 字符串使用双引号，数字不需要。
4.4 注意事项
- JS 缩进，使用soft tab（4个空格）
- 通常运算符 ( = + - * / ) 前后需要添加空格
- 结束行需添加分号
; - 尽量选用局部变量而不是全局变量
- 尽量减少DOM调用
- 将js脚本放到页面底部
- 使用jquery的data来存取数据，减少对dom的操作
- 使用on方法绑定事件，这是jquery的推荐使用
- 选择器的选择：尽量不用标签选择器，能用ID选择器的就不用class选择器
网友评论