[TOC]
## 文件命名
### 项目命名
lower-case 如 yii-review
### 目录命名
- 尽量只用一个单词
- 前端资源常用命名:js css images styles scripts
### 静态资源命名
lower-case 如 site.css error-report.js home-banner.png
## HTML语法
### 属性顺序
- class
- id
- name
- data-*
- src, for, type, href, value
- placeholder, title, alt
- aria-*, role
- required, readonly, disabled
### Boolean属性
disabled checked selected 无需申明=
## CSS语法
### 引号
CSS中统一使用单引号''或双引号""
### 选择器命名
- id使用camelCase 如 #myModal
- class使用lower-case 如 .text-danger
### 属性申明顺序
按下面的顺序做分组处理,组之间有一个空行。
~~~
.declaration-order {
display: block;
float: right;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
border: 1px solid #e5e5e5;
border-radius: 3px;
width: 100px;
height: 100px;
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
color: #333;
background-color: #f5f5f5;
opacity: 1;
}
~~~
### 颜色
用小写字母,尽量简写。
~~~
.element {
color: #abcdef;
background-color: #012;
}
~~~
### 杂项
- 属性值'0'后面不要加单位
- 去掉小数点前面的0
- 去掉数字中不必要的小数点和末尾的0
- 发布的代码中不要有 @import(如何实现???)
## JavaScript语法
### 变量命名
- 标准变量采用camelCase命名
- 构造函数,大写第一个字母
### 变量声明
一个函数作用域中所有的变量声明尽量提到函数首部,用一个var声明,不允许出现两个连续的var声明。
~~~
var value = 10,
result = value + 10,
i,
len;
~~~
### null
适用场景:
- 初始化一个将来可能被赋值为对象的变量
- 与已经初始化的变量做比较
- 作为一个参数为对象的函数的调用传参
- 作为一个返回对象的函数的返回值
不适用场景:
- 不要用null来判断函数调用时有无传参
- 不要与未初始化的变量做比较
~~~
var a = null;
if (a === null) {
...
}
~~~
### undefined
使用typeof和字符串'undefined'对变量进行判断。
~~~
if (typeof person === 'undefined') {
...
}
~~~