Html、Css、Js 编码规范

旧城等待， 2022-07-24 08:29 236阅读 0赞

Css规范

#     #

# 前言 #

虽然本文档是针对CSS设计的，但是在使用各种CSS的预编译器(如less、sass、stylus等)时，适用的部分也应尽量遵循本文档的约定。

# 代码风格 #

###  文件编码 ###

**[\[][Link 1]建议\] CSS 文件使用 UTF-8 编码。**

###  缩进 ###

**[\[][Link 2]强制\] 使用 soft tab(4个空格)做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。**

示例：.selector {

margin: 0;

padding: 0;

}

###  分号 ###

**【强制】每个属性声明末尾都要加分号**

示例：.selector {

margin: 0;

padding: 0;

}

### 行长度 ###

**[\[][Link 3]强制\] 每行不得超过 120 个字符，除非单行不可分割。**

如url 过长时不必分割

**[\[][Link 4]建议\] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。**

示例：

/* 不同属性值按逻辑分组 */

background:

transparent url(aVeryVeryVeryLongUrlIsPlacedHere)

no-repeat 0 0;

/* 可重复多次的属性，每次重复一行 */

background-image:

url(aVeryVeryVeryLongUrlIsPlacedHere)

url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 类似函数的属性值可以根据函数调用的缩进进行 */

background-image: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0.04, rgb(88,94,124)),

color-stop(0.52, rgb(115,123,162))

);

###  选择器 ###

**[\[][Link 5]强制\] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。**

示例：

/* good */

.post,

.page,

.comment {

line-height: 1.5;

}

/* bad */

.post, .page, .comment {

line-height: 1.5;

}

**[\[][Link 6]强制\] >、+、~ 选择器的两边各保留一个空格。**

示例：

/* 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;

}

**[\[][Link 7]强制\] 属性选择器中的值必须用双引号包围。**

不允许使用单引号，不允许不使用引号。

示例：

/* good */

article[name="abc"] {

}

/* bad */

article[name=’abc’] {

}

###  属性 ###

**[\[][Link 8]强制\] 属性定义必须另起一行。**

示例：

/* good */

.selector {

margin: 0;

padding: 0;

}

/* bad */

.selector { margin: 0; padding: 0; }

# [ 通用][Link 9] #

### [选择器][Link 10] ###

**[\[][Link 11]强制\] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。**

样式系统从最右边的选择符开始向左进行匹配，只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出

示例：

/* good */

#error,

.danger-message {

font-color: #c00;

}

/* bad */

dialog#error,p.danger-message {

font-color: #c00;

}

**[\[][Link 12]建议\] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。**

示例：

/* good */

#username input {}

.comment .avatar {}

/* bad */

.page .header .login #username input {}

.comment div * {}

###  属性缩写 ###

**[\[][Link 13]建议\] 在可以使用缩写的情况下，尽量使用属性缩写。**

示例：

/* good */

.post {

font: 12px/1.5 arial, sans-serif;

}

/* bad */

.post {

font-family: arial, sans-serif;

font-size: 12px;

line-height: 1.5;

}

**[\[][Link 14]建议\] 使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。**

border / margin / padding 等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。

示例：

/* centering <article class="page"> horizontally and highlight featured ones */

article {

margin: 5px;

border: 1px solid #999;

}

/* good */

.page {

margin-right: auto;

margin-left: auto;

}

.featured {

border-color: #69c;

}

/* bad */

.page {

margin: 5px auto; /* 冗余*/

}

.featured {

border: 1px solid #69c; /* 冗余*/

}

### 属性书写顺序 ###

**[\[][Link 15]建议\] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。**

1．Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等

2．Box Model 相关属性包括：border / margin / padding / width / height 等

3．Typographic 相关属性包括：font / line-height / text-align / word-wrap 等

4．Visual 相关属性包括：background / color / transition / list-style 等

示例：

.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;

}

###  清除浮动 ###

**[\[][Link 16]建议\] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。**

###  !important ###

**[\[][Link 17]建议\] 尽量不使用 !important 声明。当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。**

仅在设计上 确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。

### **z-index** ###

**[\[][Link 18]建议\] 将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。**

普通应用：1-999

悬浮菜单：1000-4999

模态窗口：5000-9999

# #

# 值与单位 #

##  文本 ##

**[\[][Link 19]强制\] 文本内容必须用双引号包围。**

文本类型的内容可能在选择器、属性值等内容中。

示例：

/* good */

html[lang|="zh"] q:before {

font-family: "Microsoft YaHei", sans-serif;

content: "“";

}

/* bad */

html[lang|=zh] q:before {

font-family: 'Microsoft YaHei', sans-serif;

content: '“';

}

## **数值** ##

**[\[][Link 20]强制\] 当数值为 0 - 1 之间的小数时，省略整数部分的 0。**

示例：

/* good */

panel {

opacity: .8

}

/* bad */

panel {

opacity: 0.8

}

##  url() ##

**[\[][Link 21]强制\] url() 函数中的路径不加引号。**

示例：

body {

background: url(bg.png);

}

**[\[][Link 22]建议\] url() 函数中的绝对路径可省去协议名。**

示例：

body {

background: url(//baidu.com/img/bg.png) no-repeat 0 0;

}

## ** 长度** ##

**[\[][Link 23]强制\] 长度为 0 时须省略单位。 (也只有长度单位可省)**

示例：

/* good */

body {

padding: 0 5px;

}

/* bad */

body {

padding: 0px 5px;

}

## **颜色** ##

**[\[][Link 24]强制\] 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);

}

**\[强制\] 颜色值可以缩写时，必须使用缩写形式。**

示例：

/* good */

.success {

background-color: #aca;

}

/* bad */

.success {

background-color: #aaccaa;

}

### ###

**[\[][Link 25]建议\] 颜色值中的英文字符采用小写。**

示例：

/* good */

.success {

background-color: #aca;

color: #90ee90;

}

/* bad */

.success {

background-color: #ACA;

color: #90ee90;

}

###  2D 位置 ###

**[\[][Link 26]强制\] 必须同时给出水平和垂直方向的位置。**

2D 位置(background-position)初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。

示例：

/* good */

body {

background-position: center top; /* 50% 0% */

}

/* bad */

body {

background-position: top; /* 50% 0% */

}

## 文本编排 ##

### 字体族 ###

**[\[][Link 27]强制\] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。**

<table style="color:rgb(51,51,51); border-collapse:collapse; margin:0px; overflow-x:auto"> 
 <thead> 
 <tr> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> 字体 </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> 操作系统 </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> Family Name </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> 宋体 (中易宋体) </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> Windows </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> SimSun </td> 
 </tr> 
 <tr> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> 黑体 (中易黑体) </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> Windows </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> SimHei </td> 
 </tr> 
 <tr> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> 微软雅黑 </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> Windows </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> Microsoft YaHei </td> 
 </tr> 
 <tr> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> 微软正黑 </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> Windows </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> Microsoft JhengHei </td> 
 </tr> 
 <tr> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> 华文黑体 </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> Mac/iOS </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> STHeiti </td> 
 </tr> 
 <tr> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> 冬青黑体 </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> Mac/iOS </td> 
 <td style="border:1px solid rgb(221,221,221); padding:7px 10px; vertical-align:top"> Hiragino Sans GB </td> 
 </tr> 
 </tbody> 
</table>

示例：h1 {

font-family: "Microsoft YaHei";

}

**[\[][Link 28]强制\] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif /sans-serif )。**

更详细说明可参考[本文][Link 29]。

示例：

/* Display according to platform */

.article {

font-family: Arial, sans-serif;

}

/* Specific for most platforms */

h1 {

font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;

}

###  字号 ###

**[\[][Link 30]强制\] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。**

由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。

## ##

###  行高 ###

**[\[][Link 31]建议\] line-height 在定义文本段落时，应使用数值。**

将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。

当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。

## 变换与动画 ##

**[\[][Link 32]强制\] 使用 transition 时应指定 transition-property。**

示例：

/* good */

.box {

transition: color 1s, border-color 1s;

}

/* bad */

.box {

transition: all 1s;

}

##  响应式 ##

**[\[][Link 33]强制\] Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。**

示例：

@media

(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */

(min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */

(min-resolution: 2dppx),             /* The standard way */

(min-resolution: 192dpi) {           /* dppx fallback */

/* Retina-specific stuff here */

}

##  兼容性 ##

###  属性前缀 ###

**[\[][Link 34]强制\] 带私有前缀的属性由长到短排列，按冒号位置对齐。**

标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。

示例：

.box {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

###  Hack ###

**[\[][Link 35]建议\] 需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。**

如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。

**[\[][Link 36]建议\] 尽量使用 选择器 hack 处理兼容性，而非 属性 hack。**

尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。

示例：

/* IE 7 */

*:first-child + html #header {

margin-top: 3px;

padding: 5px;

}

/* IE 6 */

* html #header {

margin-top: 5px;

padding: 4px;

}

**[\[][Link 37]建议\] 尽量使用简单的 属性 hack。**

示例：

.box {

_display: inline; /* fix double margin */

float: left;

margin-left: 20px;

}

.container {

overflow: hidden;

*zoom: 1; /* triggering hasLayout */

}

###  Expression ###

**[\[][Link 38]强制\] 禁止使用 Expression。**

** **

## sass中的嵌套 ##

**【建议】避免非必要的嵌套**

虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。

Html规范

## 语法 ##

**\[强制\]**

**对于属性的定义，确保全部使用双引号，绝不要使用单引号。**

**不要在自闭合（self-closing）元素的尾部添加斜线**

**不要省略可选的结束标签（closing tag）（例如，</li>或 </body>）。**

** **

<!DOCTYPE html>

<html>

<head>

<title>Page title</title>

</head>

<body>

<imgsrc="images/company-logo.png"alt="Company">

<h1class="hello-world">Hello, world!</h1>

</body>

</html>

##  doctype ##

**\[建议\]为每个 HTML 页面的第一行添加standard mode的声明，这样能够确保在每个浏览器中拥有一致的展现。**

** **

<!DOCTYPE html>

<html>

<head>

</head>

<html>

##  引入 CSS 和 JavaScript 文件 ##

**\[建议\]在引入 CSS 和 JavaScript 文件时不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。**

** **

## 属性顺序 ##

**\[建议\]按照以下给出的顺序依次排列，确保代码的易读性。**

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当减少使用，因此排在第二位。

*  `class`
 *  `id`, `name`
 *  `data-*`
 *  `src`, `for`, `type`, `href`
 *  `title`, `alt`
 *  `aria-*`, `role`

例如：

<aclass="..."id="..."data-modal="toggle"href="#">Example link</a>

## 布尔属性 ##

**【建议】布尔型属性可以在声明时不赋值**

例如：

<inputtype="text"disabled>

<inputtype="checkbox"value="1"checked>

##  层级嵌套 ##

**【建议】减少标签层级嵌套，不宜超过4层**

** **

** 语义性**

**【建议】减少非语义化标签的使用，如 div,span**

工具验证：[w3validator][]

Js规范

## 对象 ##

**\[强制\]使用直接量创建对象。**

// bad

var item = new Object();

// good

var item = {};

**\[强制\]不要使用保留字作为键名**

在 IE8 有问题，详情可[参考][Link 39]。

// bad

var superman = {

default: { clark: 'kent' },

private: true

};

// good

var superman = {

defaults: { clark: 'kent' },

hidden: true

};

## 数组 ##

**\[强制\]使用直接量创建数组。**

// bad

var items = new Array();

// good

var items = [];

**\[强制\]向数组增加元素时使用 Array.push 来替代直接赋值。**

var someStack = [];

// bad

someStack[someStack.length] = 'abracadabra';

// good

someStack.push('abracadabra');

## 字符串 ##

**\[强制\]使用单引号 '' 包裹字符串。**

// bad

var name = "Bob Parr";

// good

var name = 'Bob Parr';

// bad

var fullName = "Bob " + this.lastName;

// good

var fullName = 'Bob ' + this.lastName;

**\[建议\]多行字符的字符串应该使用连接符写成多行。**

// bad

var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// good

var errorMessage = 'This is a super long error that was thrown because ' +

'of Batman. When you stop to think about how Batman had anything to do ' +

'with this, you would get nowhere fast.';

**\[建议\]程序化生成的字符串使用 Array.join 连接而不是使用连接符。**

尤其是 IE 下,具体原因参考链接：[jsPerf][].

var items;var messages;var length;var i;

messages = [{

state: 'success',

message: 'This one worked.'

}, {

state: 'success',

message: 'This one worked as well.'

}, {

state: 'error',

message: 'This one did not work.'

}];

length = messages.length;

// bad

function inbox(messages) {

items = '<ul>';

for (i = 0; i < length; i++) {

items += '<li>' + messages[i].message + '</li>';

}

return items + '</ul>';

}

// good

function inbox(messages) {

items = [];

for (i = 0; i < length; i++) {

// use direct assignment in this case because we're micro-optimizing.

items[i] = '<li>' + messages[i].message + '</li>';

}

return '<ul>' + items.join('') + '</ul>';

}

## 函数 ##

**【强制】不要在一个非函数代码块（if、while 等）中声明一个函数，把函数赋给一个变量。**

// bad

if (currentUser) {

function test() {

console.log('Nope.');

}

// good

var test;if (currentUser) {

test = function test() {

console.log('Yup.');

};

}

**【强制】不要把参数命名为 arguments。**

因为会取代函数作用域内的 arguments 对象。

// bad

function nope(name, options, arguments) {

// ...stuff...

}

// good

function yup(name, options, args) {

// ...stuff...

}

## 变量 ##

**\[建议\]避免全局变量的使用。**

** **

##  常量 ##

**【建议】大写加下划线的方式**

Eg: `NAMES_LIKE_THIS`

## 比较运算符 & 等号 ##

**\[建议\]使用 === 和 !== 而不是 == 和 !=.**

** **

1.对象 被计算为 true

2.Undefined 被计算为 false

3.Null 被计算为 false

4.布尔值 被计算为 布尔的值

5.数字 如果是 +0、-0 或 NaN 被计算为 false，否则为 true

6.字符串 如果是空字符串 '' 被计算为 false，否则为 true

**\[建议\]使用快捷方式**

** **

// bad

if (name !== '') {

// ...stuff...

}

// good

if (name) {

// ...stuff...

}

// bad

if (collection.length > 0) {

// ...stuff...

}

// good

if (collection.length) {

// ...stuff...

}

## 块 ##

**【建议】大括号包裹所有的多行代码块。**

// bad

if (test)

return false;

// good

if (test) return false;

// good

if (test) {

return false;

}

如果通过 `if` 和 `else` 使用多行代码块，把 `else` 放在 `if` 代码块关闭括号的同一行。

// badif (test) {

thing1();

thing2();

}else {

thing3();

}

// goodif (test) {

thing1();

thing2();

} else {

thing3();

}

## 注释 ##

**【建议】给注释增加 FIXME 或 TODO 的前缀可以帮助其他开发者快速了解这是一个需要复查的问题，或是还未完成的功能。使用 // FIXME: 标注问题。**

function Calculator() {

// FIXME: shouldn't use a global here

total = 0;

return this;

}

function Calculator() {

// TODO: total should be configurable by an options param

this.total = 0;

return this;

}

# #

## 类型转换 ##

**【建议】在语句开始时执行类型转换。**

字符串：

// bad

var totalScore = this.reviewScore + '';

// good

var totalScore = '' + this.reviewScore;

// bad

var totalScore = '' + this.reviewScore + ' total score';

// good

var totalScore = this.reviewScore + ' total score';

使用 parseInt 转换数字时总是带上类型转换的基数：

var inputValue = '4';

// bad

var val = new Number(inputValue);

// bad

var val = +inputValue;

// bad

var val = inputValue >> 0;

// bad

var val = parseInt(inputValue);

// good

var val = Number(inputValue);

// good

var val = parseInt(inputValue, 10);

布尔:

var age = 0;

// bad

var hasAge = new Boolean(age);

// good

var hasAge = Boolean(age);

// good

var hasAge = !!age;

# #

## 命名规则 ##

**【建议】避免单字母命名。命名应具备描述性。**

// bad

function q() {

// ...stuff...

}

// good

function query() {

// ..stuff..

}

**【强制】使用驼峰式命名对象、函数和实例。**

// bad

var OBJEcttsssss = {};

var this_is_my_object = {};

var o = {};

function c() {}

// good

var thisIsMyObject = {};

function thisIsMyFunction() {}

**【强制】使用下划线 \_ 开头命名私有属性。**

// bad

this.__firstName__ = 'Panda';

this.firstName_ = 'Panda';

// good

this._firstName = 'Panda';

**【建议】使用 \_this 保存 this 的引用。**

// good

function() {

var _this = this;

return function() {

console.log(_this);

};

}

**【建议】文件名和模块名相同**

module.exports = CheckBox;

// in some other file

// bad

var CheckBox = require('./checkBox');

// bad

var CheckBox = require('./check_box');

// good

var CheckBox = require('./CheckBox');

## jQuery ##

**【强制】使用 $ 作为存储 jQuery 对象的变量名前缀。**

// bad

var sidebar = $('.sidebar');

// good

var $sidebar = $('.sidebar');

**\[强制\]缓存dom 查询。**

// bad

function setSidebar() {

$('.sidebar').hide();

// ...stuff...

$('.sidebar').css({

'background-color': 'pink'

});

}

// good

function setSidebar() {

var $sidebar = $('.sidebar');

$sidebar.hide();

// ...stuff...

$sidebar.css({

'background-color': 'pink'

});

}

参考：

https://github.com/fex-team/styleguide

[Link 1]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-css-文件使用无-bom-的-utf-8-编码
[Link 2]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-使用-4-个空格做为一个缩进层级不允许使用-2-个空格-或-tab-字符
[Link 3]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-每行不得超过-120-个字符除非单行不可分割
[Link 4]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-对于超长的样式在样式值的-空格-处或--后换行建议按逻辑分组
[Link 5]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-当一个-rule-包含多个-selector-时每个选择器声明必须独占一行
[Link 6]: https://github.com/fex-team/styleguide/blob/master/css.md#强制--选择器的两边各保留一个空格
[Link 7]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-属性选择器中的值必须用双引号包围
[Link 8]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-属性定义必须另起一行
[Link 9]: https://github.com/fex-team/styleguide/blob/master/css.md#3-通用
[Link 10]: https://github.com/fex-team/styleguide/blob/master/css.md#31-选择器
[Link 11]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-如无必要不得为-idclass-选择器添加类型选择器进行限定
[Link 12]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-选择器的嵌套层级应不大于-3-级位置靠后的限定条件应尽可能精确
[Link 13]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-在可以使用缩写的情况下尽量使用属性缩写
[Link 14]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-使用-border--margin--padding-等缩写时应注意隐含值对实际数值的影响确实需要设置多个方向的值时才使用缩写
[Link 15]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-同一-rule-set-下的属性在书写时应按功能进行分组并以-formatting-model布局方式位置--box-model尺寸--typographic文本相关--visual视觉效果-的顺序书写以提高代码的可读性
[Link 16]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-当元素需要撑起高度以包含内部的浮动元素时通过对伪类设置-clear-或触发-bfc-的方式进行-clearfix尽量不使用增加空标签的方式
[Link 17]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-尽量不使用-important-声明
[Link 18]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-将-z-index-进行分层对文档流外绝对定位元素的视觉层级关系进行管理
[Link 19]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-文本内容必须用双引号包围
[Link 20]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-当数值为-0---1-之间的小数时省略整数部分的-0
[Link 21]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-url-函数中的路径不加引号
[Link 22]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-url-函数中的绝对路径可省去协议名
[Link 23]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-长度为-0-时须省略单位-也只有长度单位可省
[Link 24]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-rgb颜色值必须使用十六进制记号形式-rrggbb不允许使用-rgb
[Link 25]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-颜色值中的英文字符采用小写如不用小写也需要保证同一项目内保持大小写一致
[Link 26]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-必须同时给出水平和垂直方向的位置
[Link 27]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-font-family-属性中的字体族名称应使用字体的英文-family-name其中如有空格须放置在引号中
[Link 28]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-font-family-按西文字体在前中文字体在后效果佳-质量高更能满足需求-的字体在前效果一般的字体在后的顺序编写最后必须指定一个通用字体族-serif--sans-serif-
[Link 29]: http://www.zhihu.com/question/19911793/answer/13329819
[Link 30]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-需要在-windows-平台显示的中文内容其字号应不小于-12px
[Link 31]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-line-height-在定义文本段落时应使用数值
[Link 32]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-使用-transition-时应指定-transition-property
[Link 33]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-media-query-如果有多个逗号分隔的条件时应将每个条件放在单独一行中
[Link 34]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-带私有前缀的属性由长到短排列按冒号位置对齐
[Link 35]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-需要添加-hack-时应尽可能考虑是否可以采用其他方式解决
[Link 36]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-尽量使用-选择器-hack-处理兼容性而非-属性-hack
[Link 37]: https://github.com/fex-team/styleguide/blob/master/css.md#建议-尽量使用简单的-属性-hack
[Link 38]: https://github.com/fex-team/styleguide/blob/master/css.md#强制-禁止使用-expression
[w3validator]: https://validator.w3.org/
[Link 39]: https://github.com/airbnb/javascript/issues/61
[jsPerf]: http://jsperf.com/string-vs-array-concat/2