HTML

  • 使用 4 个空格作为一个缩进层级。
  • class 和 id 命名,必须单词全字母小写,单词间使用减号分割,如:modal-body。
  • id 必须保证页面内唯一。
  • 标签名必须使用小写字母。
  • 对于无需自闭合的标签,不允许自闭合,如:
<!-- good -->
<input type="text" name="title">

<!-- bad -->
<input type="text" name="title" />
  • 属性名必须使用小写字母。
  • 属性值必须使用双引号包围。
  • 自定义属性使用 data- 开头。
  • 设置页面使用 utf-8 编码:
  • HTML 文件使用无 BOM 的 UTF-8 编码。
  • 引入 CSS 无需指明 type 属性,示例:
  • 引入 JavaScript 无需指明 type 属性,示例:
  • 禁止 img 的 src 取值为空,这会导致部分浏览器重新加载一次当前页面。

CSS

  • 使用 4 个空格作为一个缩进层级。
  • 选择器 与 { 之间必须包含空格。
  • 属性名 与之后的 : 之间不允许包含空格,: 与 属性值 之间必须包含空格,如:margin: 0;。
  • 列表型属性值 书写在单行时,, 后必须跟一个空格,如:font-family: Arial, sans-serif;。
  • 一个 rule 包含多个 selector 时,每个选择器声明必须独占一行,如:
/ good /
.post,
.page,
.comment {
    line-height: 1.5;
}

/ bad /
.post, .page, .comment {
    line-height: 1.5;
}
  • 、+、~ 选择器的两边各保留一个空格,如:

/ good /
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/ bad /
main>nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}
  • 属性选择器中的值必须用双引号包围,如:
/ good /
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female
}

/ bad /
article[character='juliet'] {
    voice-family: "Vivien Leigh", victoria, female
}
  • 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确,如:
/ good /
#username input {}
.comment .avatar {}

/ bad /
.page .header .login #username input {}
.comment div  {}
  • 同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) 的顺序书写,以提高代码的可读性。
    • Formatting Model 相关属性包括:position / top / right / bottom / left / float / display / overflow 等
    • Box Model 相关属性包括:border / margin / padding / width / height 等
    • Typographic 相关属性包括:font / line-height / text-align / word-wrap 等
    • Visual 相关属性包括:background / color / transition / list-style 等
/* 另外,如果包含 content 属性,应放在最前面。 */

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ... * /
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}
  • 尽量不使用 !important 声明。
  • url() 函数中的路径不加引号,如:background: url(bg.png);。
  • 长度为 0 时须省略单位。(也只有长度单位可省),如:padding: 0 5px;。
  • 颜色值中的英文字符采用小写。
  • 颜色值不允许使用命名色值,如:
/* good */
.success {
    color: #90ee90;
}

/* bad* /
.success {
    color: lightgreen;
}
  • 颜色值可以缩写时,必须使用缩写形式,如:background-color: #aca;。
  • RGB 颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb(),如:
/* 带有 alpha 的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。 */

/* good */
.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

/* bad */
.success {
    box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
}
  • font-family 属性中的字体族名称应使用字体的英文 Family Name,其中如有空格,须放置在引号中,如:
字体 操作系统 Family Name
宋体 (中易宋体) Windows SimSun
黑体 (中易黑体) Windows SimHei
微软雅黑 Windows Microsoft YaHei
微软正黑 Windows Microsoft JhengHei
华文黑体 Mac/iOS STHeiti
冬青黑体 Mac/iOS Hiragino Sans GB
文泉驿正黑 Linux WenQuanYi Zen Hei
文泉驿微米黑 Linux WenQuanYi Micro Hei
  • CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持 400 和 700 两档,分别等价于关键词 normal 和 bold,使用数值描述增加了灵活性,也更简短,如:
/* good */
h1 {
    font-weight: 700;
}

/* bad */
h1 {
    font-weight: bold;
}
  • 带私有前缀的属性由长到短排列,按冒号位置对齐,如:
.box {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

JavaScript

  • 使用 4 个空格做为一个缩进层级。
  • switch 下的 case 和 default 必须增加一个缩进层级,如:
// good
switch (variable) {

    case '1':
        // do...
        break;

    case '2':
        // do...
        break;

    default:
        // do...

}
  • 二元运算符两侧必须有一个空格,一元运算符与操作对象之间不允许有空格,如:
var a = !arr.length;
a++;
a = b + c;

用作代码块起始的左花括号 { 前必须有一个空格,如:

// good
if (condition) {
}

while (condition) {
}

function funcName() {
}

// bad
if (condition){
}

while (condition){
}

function funcName(){
}
  • 在对象创建时,属性中的 : 之后必须有空格,: 之前不允许有空格,如:
// good
var obj = {
    a: 1,
    b: 2,
    c: 3
};

// bad
var obj = {
    a : 1,
    b:2,
    c :3
};

运算符处换行时,运算符必须在新行的行首,如:

// good
if (user.isAuthenticated()
    && user.isInRole('admin')
    && user.hasAuthority('add-admin')
    || user.hasAuthority('delete-admin')
) {
    // Code
}

var result = number1 + number2 + number3
    + number4 + number5;


// bad
if (user.isAuthenticated() &&
    user.isInRole('admin') &&
    user.hasAuthority('add-admin') ||
    user.hasAuthority('delete-admin')) {
    // Code
}

var result = number1 + number2 + number3 +
    number4 + number5;
  • 对于 if...else...、try...catch...finally 的缩进:
if (condition) {
    // some statements;
} else {
    // some statements;
}

try {
    // some statements;
} catch (ex) {
    // some statements;
}
  • 在 if / else / for / do / while 语句中,即使只有一行,也不得省略块 {...}。
  • 变量 使用 Camel 命名法,如:var loadingModules = {};。
  • 字符串开头和结束使用单引号 '。
  • 拼接 HTML 字符串的排版:
// 按一定长度截断字符串,并使用 + 运算符进行连接。
// 分隔字符串尽量按语义进行,如不要在一个完整的名词中间断开。
// 特别的,对于 HTML 片段的拼接,通过缩进,保持和 HTML 相同的结构。
var html = '' // 此处用一个空字符串,以便整个 HTML 片段都在新行严格对齐
    + '<article>'
    +     '<h1>Title here</h1>'
    +     '<p>This is a paragraph</p>'
    +     '<footer>Complete</footer>'
    + '</article>';
  • 行尾不得有多余的空格。