fe / LearningDocumentation · Commits

Go to a project

Authored by xuqi
Commit 36f4ea9fb07cb0de32feb4afae06f12002f54500 1 parent c9b2846f

规范整合简化

Inline Side-by-side
Showing 4 changed files with 133 additions and 705 deletions
# JavaScript代码规范
## 缩进
缩进由**4个空格**组成（由于tab在各编辑器和系统之间解析有差异，所以建议使用空格）
## 行的长度
每行长度不应该超过**120**个字符，如果一行多余120个字符，应该在一个运算符后换行，下一行增加**2**级缩进，即8个空格）
每行长度不应该超过**80**个字符，如果一行多余80个字符，应该在一个运算符后换行，下一行增加**2**级缩进，即8个空格）
doSomething(argument1, argument2, argument3, argument4,
argument5);
... ... @@ -32,13 +29,20 @@
var str = 'I am a programer.I love JS and \
Node';
##空行
* 方法之间添加空行分隔
* 单行或多行注释前添加空行
* 逻辑块之间添加空行增加可读性
## null使用场景
* 用来初始化一个变量，该变量可能被赋值为一个对象
* 用来和一个已经初始化的变量比较
* 当函数的参数期望为对象时，被用作参数传入
* 当函数的返回值期望是对象时，被用作返回值传出
## undefined
禁止使用`name === undefined`判断一个变量是否定义。应该使用`typeof(name) === 'undefined'`;
## 对象直接量
* 起始左括号应该与表达式保持一行
* 每个属性的键名前保持一个缩进，第一个属性应该在左括号后另一起行
... ... @@ -80,19 +84,16 @@
sex,
...
另外，变量名需要给出注释，否则别人很难读懂接下来代码的意思。
#### 变量术语约定
* `get/set` 不要和一个字段相连，除非它被定义为私有变量
* 前缀为`is`的变量名 应该 为布尔值，同理可以为`has`,`can` 或者`should`
* `compute`作为变量名应为已经计算完成的变量
* `find`作为变量名应为已经查找完成的变量
* `initialize`或者`init`作为变量名应为已经实例化（初始化）完成的类或者其他类型的变量
* UI控制变量应在名称后加控制类型，例如:leftComboBox, topScrollPane
* 如果变量表示多个实例，必须用复数单词，如：cats
* 带有 `num` 或者 `count` 开头的变量名约定为数字
* 重复变量建议使用 `i`, `j`, `k` （依次类推）等名称的变量
* 能缩写的名称尽量使用缩写。如：prod表示产品
* 避免产生歧义的布尔变量名称，例如：isNotError, isNotFound为非法
* 错误类建议在变量名称后加上 `Exception` 或者 `Error`
变量可以按照一定规则命名也表示某些特定功能，比如：
* is前缀可以表示boolean值
* num或者count表示计数
* 错误加上Exception或者Error后缀
* ...
### 函数
* 函数在使用前应该先定义
* 函数名和开始圆括号之间无空格（包括匿名函数的function关键字与圆括号之间）
... ... @@ -110,22 +111,53 @@
doSomething();
};
另外，IIFE的标准格式也在这里指出：
(function(args) {
//
}(args)); //(args)位于外层括号内
其他声明函数需要注意的方面：
* 循环中切勿加入函数，很容易因为闭包的原因造成错误。
//BAD
for(i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 0);
}
* “代码块”中切勿加入函数声明，混淆作用域
//BAD
if (conditions) {
function() {
//doSomethings
}
}
## 命名
### 变量：
* 采用小驼峰命名格式
* 变量命名为名词（区别函数）
* 变量中不使用_
### 常量：
* 所有字符大写，不同单词之间适用单个下划线隔开
### 函数：
* 采用小驼峰命名格式
* 函数命名为动词（区别变量）
* 函数名中是使用_
### 构造函数：
* 采用大驼峰命名格式
* 命名应该是名词
### 私有成员：
* 一个对象中不希望外部访问的以下划线开头（约定）
## 表达式
### 赋值
当给变量赋值时，如果右侧是含有比较语句等形式的表达式时，用圆括号包裹
... ... @@ -191,7 +223,8 @@
#### switch语句
* 每一个case保持一个缩进，除第一个之外包括default在内的每一个case都应该在之前保留一个空行
* 每一组语句都应该以break，return等结尾，或者用一行注释表示跳过
* 每一组语句都应该以break，return等结尾，或者用一行注释表示跳过(falling through)
* 无default的情况也要注释特别说明
switch (val) {
case 1:
... ... @@ -232,6 +265,15 @@
* date
*/
函数的说明也采取类似格式：
/**
* 函数功能描述
* @param ...
* @returns ...
*/
附[标签说明](http://usejsdoc.org/)
### JQuery插件规范
* 文件命名为jquery.plugin-name.js
* 所有新方法附加到jquery.fn对象，所有新功能附加到jquery对象
... ... @@ -239,105 +281,4 @@
* 插件的开头带一个`;`,防止代码合并出现问题
* 除特殊注明外，所有方法必须返回jquery对象以便于链式调用
* 使用this.each迭代匹配的元素
* 在插件代码中使用`JQuery`而不是`$`，减少命名冲突对我们的影响
### 全局命名空间污染与 IIFE
总是将代码包裹成一个IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域，防止全局命名空间被污染。
//GOOD
(function(log, w, undefined){
'use strict';
var x = 10,
y = 100;
// Will output 'true true'
log((w.x === undefined) + ' ' + (w.y === undefined));
}(window.console.log, window));
//BAD
var x = 10,
y = 100;
// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + ' ' + window.y);
立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。like: `(function(){}());`。
so，用下列写法来格式化你的 IIFE 代码：
(function(){
'use strict';
// Code goes here
}());
如果你想引用全局变量或者是外层 IIFE 的变量，可以通过下列方式传参：
(function($, w, d){
'use strict';
$(function() {
w.alert(d.querySelectorAll('div').length);
});
}(jQuery, window, document));
### 严格模式
use strict;
### 语句块内的函数声明
切勿在语句块内声明函数，在 ECMAScript 5 的严格模式下，这是不合法的。函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。
//BAD
if (x) {
function foo() {}
}
//GOOD
var foo;
if (x) {
foo = function() {};
}
### 标准特性
总是优先考虑使用标准特性。从性能、扩展性、兼容性方面考虑，总是首选标准的特性（e.g.：首选 string.charAt(3) 而不是 string[3]）。
### 切勿在循环中创建函数
在简单的循环语句中加入函数是非常容易形成闭包而带来隐患的
//GOOD
(function(log, w){
'use strict';
//
var numbers = [1, 2, 3],
i;
numbers.forEach(function(number, index) {
w.setTimeout(function() {
w.alert('Index ' + index + ' with number ' + number);
}, 0);
});
}(window.console.log, window));
//BAD
(function(log, w){
'use strict';
//
var numbers = [1, 2, 3],
i;
for(i = 0; i < numbers.length; i++) {
w.setTimeout(function() {
w.alert('Index ' + i + ' with number ' + numbers[i]);
}, 0);
}
}(window.console.log, window));
### this
限制this使用场景
* 在构造函数中
* 在对象的方法中（包括由此创建出的闭包内）
\ No newline at end of file
* 在插件代码中使用`JQuery`而不是`$`，减少命名冲突对我们的影响
\ No newline at end of file
... ...
# css / sass代码规范
## id和class命名
id和class总是使用可以反应元素目的和用途的名称，或其他通用名称。而不使用表象或者晦涩难懂的名称。
//GOOD
.heavy {
font-weight: 800;
}
.important {
color: red;
}
//BAD
.fw-800 {
font-weight: 800;
}
.red {
color: red;
}
## 合理的避免使用id
一般情况下id不应该被应用于样式，id选择器权重很高，样式很难被覆盖
//GOOD
.content .title {
font-size: 2em;
}
//BAD
#content .title {
font-size: 2em;
## 选择器
* 使用class进行样式匹配，而不是id和标签
* 避免使用属性选择器，会影响浏览器性能
* 控制选择器长度，每个组合应该控制在3个以内
* 尽可能精确的元素定位
## 规则细节
.ele-header, /*规则1：每个选择器声明总是使用新的一行*/
.ele-body,
.ele-footer { /*规则2：'{' 前需要添加1个空格*/
line-height: 1.2; /*规则3；样式声明以;结束，每个样式声明独占一行*/
font-weight: normal; /*规则4：属性声明的:后添加1个空格*/
margin: 0; /*规则5：属性值为0时不添加单位*/
background-color: #f3d; /*规则6：十六进制小写和缩写*/
}
/*规则7：没组选择器声明之间适用一空行间隔*/
.ele2 {
font-family: "open sans", arial, sans-serif; /*规则8：使用" "，而不是' '*/
padding: 0 1em 2em; /*规则9：适当缩写但不滥用*/
border-top: 1px;
background-color: rgba(0,0,0,.5); /*规则10：颜色值rgba等中不需要增加空格，并且去除浮点数前面不必要的0*/
}
## CSS选择器中避免标签名
当构建选择器时应该使用清晰、准确和有语义的class名，而不使用标签选择器。从分离的角度考虑,在表现层中不应该分配html标记/语义。
//GOOD
.content > .content-header > .title {
font-size: 2em;
}
//BAD
div.content > header.content-header > h2.title {
font-size: 2em;
}
## 尽可能的精确
很多前端开发人员写选择器链的时候不使用直接子选择器（区别于后代选择器）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到DOM末端的选择器， 你应该总是考虑直接子选择器。
## 缩写属性
CSS提供了各种缩写属性（如 font 字体）应该尽可能使用，即使在只设置一个值的情况下。使用缩写属性对于代码效率和可读性是有很有用的。
//GOOD
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
//BAD
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
## 0和单位
省略“0”值后面的单位。不要在0值后面使用单位，除非有值。
//GOOD
padding-bottom: 0;
margin: 0;
//BAD
padding-bottom: 0px;
margin: 0em;
## 十六进制表示法
始终使用**小写**以及**简写**的十六进制数字
//GOOD
color: #f3a;
//BAD
color: #FF33AA;
## id和class名的分隔符
使用连字符（`-`）分隔id和class名中的单词。
//GOOD
.video-id {}
.ads-sample {}
//BAD
.demoimage {}
.error_status {}
## 声明顺序
这是一个选择器内书写CSS属性顺序的大致轮廓，作为最佳实践，我们应该遵循以下顺序：
1. 结构性属性：
display,
position, left, top, right,
overflow, float, clear,
margin, padding
...
2. 表现性属性：
background, border,
font, text
...
//GOOD
.box {
display: block;
position: absolute;
left: 30%;
right: 30%;
overflow: hidden;
margin: 1em;
padding: 1em;
background-color: #eee;
border: 3px solid #ddd;
font-family: 'Arial', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
}
* Position属性 (position,top,right,z-index...)
* Box Model属性 (display,float,width...)
* Typographic属性 (font,line-height,color,text-align...)
* Visual属性 (background,border,border-radius...)
## 声明结束
为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
因为Position属性可以是一个元素脱离正常的文本流并可以覆盖盒模型相关样式，所以Position排第一位。盒模型决定一个元素位置和大小紧跟其后。后面属性属于元素内部或不会对前两者产生影响的，排在后面。
//GOOD
.test {
display: block;
height: 100px;
}
//BAD
.test {
display: block; height: 100px
}
## 属性名结束
属性名的冒号后使用一个空格。出于一致性的原因，属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
//GOOD
h3 {
font-weight: bold;
}
//BAD
h3 {
font-weight:bold;
}
## 选择器和声明分离
每个选择器和属性声明总是使用新的一行。
//GOOD
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
//BAD
a:focus, a:active {
position: relative; top: 1px;
}
完整属性顺序参考[Recsss](http://twitter.github.com/recess)
## 规则分隔
规则之间始终有一个空行分隔。
## 媒体查询
媒体查询的位置靠近他们相关的规则。
//GOOD
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
@media (min-width: 480px) {
.media-element {
//some attr
}
}
## CSS引号
属性选择器或属性值用双引号（""），而不是单引号（''）括起来。URI / URL不要使用引号。
## 前缀属性
使用前缀属性时，通过缩进使取值垂直对齐。
//GOOD
@import url(//cdn.com/foundation.css);
html {
font-family: "open sans", arial, sans-serif;
}
body:after {
content: "pause";
}
//BAD
@import url('//cdn.com/foundation.css');
html {
font-family: 'open sans', arial, sans-serif;
}
body:after {
content: 'pause';
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
-----------------------------------------------------------------------
## SASS嵌套规则
## SASS规则
### 选择器嵌套
在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。如果你需要指定一些子元素的样式属性，而父元素将不使用什么样式属性，可以使用常规的CSS选择器链。
避免不必要的嵌套。只有在需要给父元素增加样式并且有多个子元素时才考虑嵌套
//GOOD
.content {
... ... @@ -239,112 +85,13 @@ CSS憬改 font 摮砲撠賢雿輻嚗雿
//GOOD
.content {
display: block;
//SPACE HERE
> .news-article {
background-color: #eee;
> .title {
font-size: 1.2em;
}
> .article-footnote {
font-size: 0.8em;
}
}
}
### 上下文媒体查询
在Sass中，当你嵌套你的选择器时也可以使用上下文媒体查询，你可以在任何给定的嵌套层次中使用媒体查询。
//GOOD
.content-page {
font-size: 1.2rem;
@media screen and (min-width: 641px) {
font-size: 1rem;
}
> .main {
background-color: whitesmoke;
> .latest-news {
padding: 1rem;
> .news-article {
padding: 1rem;
> .title {
font-size: 2rem;
@media screen and (min-width: 641px) {
font-size: 3rem;
}
}
}
}
> .content {
margin-top: 2rem;
padding: 1rem;
}
}
> .page-footer {
margin-top: 2rem;
font-size: 1rem;
@media screen and (min-width: 641px) {
font-size: 0.8rem;
}
}
}
//BAD
.content-page {
font-size: 1.2rem;
> .main {
background-color: whitesmoke;
> .latest-news {
padding: 1rem;
> .news-article {
padding: 1rem;
> .title {
font-size: 2rem;
}
}
}
> .content {
margin-top: 2rem;
padding: 1rem;
}
}
> .page-footer {
margin-top: 2rem;
font-size: 1rem;
}
}
@media screen and (min-width: 641px) {
.content-page {
font-size: 1rem;
> .main > .latest-news > .news-article > .title {
font-size: 3rem;
}
> .page-footer {
font-size: 0.8rem;
}
}
}
### 嵌套顺序和父级选择器
### 嵌套顺序
当使用Sass的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个scss块应具有的顺序：
1. 当前选择器的样式属性
... ...
# HTML代码规范
## 文档类型
使用 HTML5 的文档类型声明： <!DOCTYPE html>。建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限。
HTML 中最好不要将无内容元素的标签闭合，例如：使用 <br> 而非 <br />。
*ps:无内容元素标签包括：`area`,`base`, `br`, `col`, `command`, `embed`,` hr`, `img`, `input`, `keygen`, `link`, `meta`, `param`, `source`, `track`, `wbr`*
## 语义化
根据元素（有时被错误地称作“标签”）被创造出来时的初始意义来使用它。打个比方，用heading元素来定义头部标题，p元素来定义文字段落，用a元素来定义链接锚点，等等。
有根据有目的地使用 HTML 元素，对于可访问性、代码重用、代码效率来说意义重大。
//GOOD
<!-- The page header should go into a header element -->
<header>
<!-- As this title belongs to the page structure it's a heading and h1 should be used -->
<h1>My page title</h1>
</header>
<!-- All navigation should go into a nav element -->
<nav class="top-navigation">
<!-- A listing of elements should always go to UL (OL for ordered listings) -->
<ul>
<li class="nav-item"><a href="#home">Home</a></li>
<li class="nav-item"><a href="#news">News</a></li>
<li class="nav-item"><a href="#about">About</a></li>
</ul>
</nav>
<!-- The main part of the page should go into a main element (also use role="main" for accessibility) -->
<main class="news-page" role="main">
<!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. -->
<section class="page-section news">
<!-- A section header should go into a section element -->
<header>
<!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
<h2 class="title">All news articles</h2>
</header>
<!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other
re-usable module / section that can occur multiple times on a page) a article element should be used -->
<article class="news-article">
<!-- An article can contain a header that contains the summary / introduction information of the article -->
<header>
<!-- As a article title does not belong to the overall page structure there should not be any heading tag! -->
<div class="article-title">Good article</div>
<!-- Small can optionally be used to reduce importance -->
<small class="intro">Introduction sub-title</small>
</header>
<!-- For the main content in a section or article there is no semantic element -->
<div class="content">
<p>This is a good example for HTML semantics</p>
</div>
<!-- For content that is represented as side note or less important information in a given context use aside -->
<aside class="article-side-notes">
<p>I think I'm more on the side and should not receive the main credits</p>
</aside>
<!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -->
<footer class="article-foot-notes">
<!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time
while the actual text in the time element can also be more human readable / relative -->
<p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p>
</footer>
</article>
<!-- In a section, footnotes or similar information can also go into a footer element -->
<footer class="section-footer">
<p>Related sections: Events, Public holidays</p>
</footer>
</section>
</main>
<!-- Your page footer should go into a global footer element -->
<footer class="page-footer">
Copyright 2014
</footer>
//BAD
<b>My page title</b>
<div class="top-navigation">
<div class="nav-item"><a href="#home">Home</a></div>
<div class="nav-item"><a href="#news">News</a></div>
<div class="nav-item"><a href="#about">About</a></div>
</div>
<div class="news-page">
<div class="page-section news">
<div class="title">All news articles</div>
<div class="news-article">
<h2>Bad article</h2>
<div class="intro">Introduction sub-title</div>
<div class="content">This is a very bad example for HTML semantics</div>
<div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div>
<div class="article-foot-notes">
This article was created by David <div class="time">2014-01-01 00:00</div>
</div>
</div>
<div class="section-footer">
Related sections: Events, Public holidays
</div>
</div>
</div>
<div class="page-footer">
Copyright 2014
</div>
## 多媒体回溯
对页面上的媒体而言，像图片、视频、canvas 动画等，要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本（alt），视频和音频文件我们可以为其加上说明文字或字幕。
//GOOD
<img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">
//BAD
<img src="luke-skywalker.jpg">
## 关注点分离
严格地保证**结构HTML**、**表现CSS**、**行为JS**三者分离。
清晰的分层意味着：
不使用超过一到两张样式表
不使用超过一到两个脚本（学会用合并脚本）
不使用行内样式
不在元素上使用 style 属性
不使用行内脚本
不使用表象元素（`b`, `u`, `center`, `font`, `b` ... ）
不使用表象 class 名（i.e. red, left, center）
//GOOD
<!DOCTYPE html>
<html>
<head>
<!-- Concatinate your style sheets into a single one -->
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- Don't use style attributes but assign sensible classes and apply styles in the stylesheet -->
<h1 class="title"></h1>
<!-- Don't use presentational elements and assign sensible classes -->
<div class="sub-title">I'm a subtitle and I'm bold!</div>
<!-- Maybe your comments get centered in your presentation but that decision is up to the stylesheet -->
<span class="comment">Dare you center me!</span>
<!-- You wanted to make it red because it's important so then also name the class important and decide in the stylesheet
what you want to do with it -->
<div class="important">I'm important!</div>
<!-- Put all your scripts into files and concatinate them into a single one -->
<script async src="main.js"></script>
</body>
</html>
//BAD
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="type.css">
<link rel="stylesheet" href="modules/teaser.css">
</head>
<body>
<h1 style="font-size: 3rem"></h1>
<b>I'm a subtitle and I'm bold!</b>
<center>Dare you center me!</center>
<script>
alert('Just dont...');
</script>
<div class="red">I'm important!</div>
</body>
</html>
## HTML 内容至上
不要让非内容信息污染了你的HTML。HTML就应该只关注内容，HTML标签的目的，就是为了不断地展示内容信息。
* 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
* 不要将 img 元素当做专门用来做视觉设计的元素
## HTML 引号
使用双引号(" ") 而不是单引号(' ') 。
//GOOD
<!-- That's clean markup! -->
<span class="text-box">
See the square next to me?
</span>
## 标签闭合
在自动闭合标签后不要使用斜线`/`。
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
## 属性顺序
HTML属性应该按照特定顺序出现在标签内
//BAD
<!-- We should not introduce an additional element just to solve a design problem -->
<span class="text-box">
<span class="square"></span>
See the square next to me?
</span>
* id
* class
* name
* data-
* src, for, type, href
* title, alt
* aria-*, role
.text-box > .square {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
## boolean属性
不需要为boolean属性添加取值，存在表示true，不存在则表示false。比如：selected，disabled等。
图片和SVG能被引入到HTML中的唯一理由是它们呈现出了与内容相关的一些信息。
## 减少不必要的标签嵌套
//GOOD
<!-- That's clean markup! -->
<span class="text-box">
See the square next to me?
</span>
/* We use a :before pseudo element with a background image to solve the problem */
.text-box:before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background: url(square.svg) no-repeat;
background-size: 100%;
}
<img class="avatar" src="..." alt="...">
//BAD
<!-- Content images should never be used for design elements! -->
<span class="text-box">
<img src="square.svg" alt="Square" />
See the square next to me?
<span class="avatar">
<img src="..." alt="...">
</span>
## type属性
省略样式表与脚本上的type属性。鉴于HTML5中以上两者默认的type值就是text/css和text/javascript，所以type属性一般是可以忽略掉的。甚至在老旧版本的浏览器中这么做也是安全可靠的。
//GOOD
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
//BAD
<link rel="stylesheet" href="main.css" type="text/css">
<script src="main.js" type="text/javascript"></script>
## 格式化规则
在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。
//GOOD
<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe</li>
<li>Larry</li>
<li>Curly</li>
</ul>
<table>
<thead>
<tr>
<th scope="col">Income</th>
<th scope="col">Taxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>$ 5.00</td>
<td>$ 4.50</td>
</tr>
</tbody>
</table>
## HTML 引号
使用双引号(" ") 而不是单引号(' ') 。
## class和id命名
* 保持小写以及中划线`-`分隔
* 命名简短但是也要明确指示角色和意图
* 必要时可以使用父节点的class作为前缀
[参考](http://www.css88.com/archives/5364)
\ No newline at end of file
[参考资料1](http://alloyteam.github.io/code-guide/#html)
[参考资料2](http://www.css88.com/archives/5364)
\ No newline at end of file
... ...
# 通用代码规范
## 文件/资源命名
在 web 项目中，所有的文件名应该都遵循同一命名约定。以可读性而言，减号`-`是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符（i.e. //example.com/blog/my-blog-entry or //s.example.com/images/big-black-background.jpg），所以理所当然的，减号应该也是用来分隔资源名称的好选择。
文件，资源，目录等全部**小写**命名，有多个单词组成时以中划线`-`分隔；有复数结构时，采用复数命名。
**请确保文件命名总是以字母开头而不是数字**。而以特殊字符开头命名的文件，一般都有特殊的含义与用处（比如compass中的下划线就是用来标记跳过直接编译的文件用的）。
**资源的字母名称必须全为小写**，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。
还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 3fa89b.main.min.css）。这种情况下，建议使用**点分隔符**来区分这些在文件名中带有清晰意义的元数据。
对于压缩文件等有需要特殊前缀的文件使用点`.`进行划分，比如a.min.js。
//GOOD
my-script.js
... ... @@ -23,28 +19,11 @@
1001-scripts.js
my-file-min.css
## 协议
不要指定引入资源所带的具体协议。当引入样式和脚本，图片或其他媒体文件时，URL所指向的具体路径，不要指定协议部分（http:，https:），除非这两者协议都不可用。不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。
//GOOD
<script src="//cdn.com/foundation.min.js"></script>
//
.example {
background: url(//static.example.com/images/bg.jpg);
}
//BAD
<script src="http://cdn.com/foundation.min.js"></script>
//
.example {
background: url(http://static.example.com/images/bg.jpg);
}
## 文本缩进
一次缩进4个空格
## 注释
原则：**适量，并且切中要害***
原则：**适量，并且切中要害**
必要的注释使用场景
1. 代码晦涩难懂
2. 可能被别人误认为是错误的代码
... ... @@ -59,4 +38,5 @@ NOTE：大段的代码注释尽量予以避免，N久后，那段代码的存在
对于 JavaScript的代码检查，建议使用*JSHint*。(sublime Text中可以安装jshint插件)
[参考资料](http://www.css88.com/archives/5361)
\ No newline at end of file
[参考资料1](http://www.css88.com/archives/5361)
[参考资料2](http://alloyteam.github.io/code-guide/)
\ No newline at end of file
... ...