-
使用HTML5文件类型
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
-
使用语义HTML标签
<!-- bad --> <div class="nav"> <p><a>page1</a></p> <p><a>page2</a></p> </div> <!-- good --> <ul class="nav"> <li><a>page1</a></li> <li><a>page2</a></li> </ul> <!-- bad --> <span style="cursor:pointer">点击打开<span> <!-- good --> <a href="javascript:;">点击打开</a> <!-- bad --> <!-- divist --> <div class="shipping-wrapper"> <div class="name"></div> <div class="meta"> <div class="address"></div> </div> <div class="desc"></div> </div> <!-- good --> <section class="wrapper"> <cite></cite> <span class="meta"> <address></address> </span> <div class="desc"></div> </section>
- 使用两个空格（适用HTML、CSS、Javacript）
-
放在
<head>标签内/* bad */ <div> <style> .foo { color: #000; } </yle> </div> /* good */ <head> <style> .foo { color: #000; } </style> </head>
-
<script>根级代码不缩进/* bad */ <section> <div> <h1>Foobar</h1> <script> $('h1').html('gotcha.') </script> </div> </section> /* good */ <section> <div> <h1>Foobar</h1> <script> $('h1').html('gotcha.') </script> </div> </section>
-
使用content-box作为开发默认值
/* bad */ box-sizing: content-box; /* good */ * { box-sizing: border-box; }
-
类名使用
-连接符/* bad */ .btn_save { background: cyan } /* good */ .btn-save { background: cyan }
-
样式属性一个一行
/* bad */ .body { background: #ddd; color: #333 } /* good */ .body { background: #ddd; color: #333 }
-
每个样式都有各自的作用域
/* bad */ 将有样式都写在main.css文件内 /* good */ 如果样式不是通用样式，将样式写在页面的<head>标签内
-
自身样式在前，嵌套样式在后
/* bad */ .navigation .h2 color: #333 width: 300px display: none /* good */ .navigation width: 300px display: none .h2 color: #333
-
我们不使用分号。除了行首是"[,(,+,-,/"，在前面添加分号
// bad var dom = document.getElementById('foo'); dom.style.display = 'none'; // good var dom = document.getElementById('foo') dom.style.display = 'none'
-
尽量使用单引号
// bad var pizza = "yummy" var hamburg = "'yummy'?" // good var pizza = 'yummy' var hamburg = '"yummy"?'
-
使用严格检查 ===, !== 而不是 ==, !=
// bad if (name !== '') { // ...stuff... } // good if (name) { // ...stuff... } // bad if (collection.length > 0) { // ...stuff... } // good if (collection.length) { // ...stuff... }
-
避免使用单个字母作为变量，尽可能使用有意义的变量名。
// bad function q() { // ...stuff... } // good function query() { // ..stuff.. }
-
使用驼峰命名法
// bad var this_is_my_object = {} function c() {} var u = new user({ name: 'Bob Parr' }) // good var thisIsMyObject = {} function thisIsMyFunction() {} var user = new User({ name: 'Bob Parr' })
-
类名使用帕斯卡命名法
// bad function user(options) { this.name = options.name } var bad = new user({ name: 'nope' }) // good function User(options) { this.name = options.name } var good = new User({ name: 'yup' })
-
变量->函数->调用
// bad var name = 'foo' greet(name) function greet(name) { alert(name) } // good var name = 'foo' function greet(name) { alert(name) } greet(name)
-
使用
点语法读取属性var person = { name: 'Kelly' } // bad person['name'] // good person.name