命名規(guī)則
1 全部采用小寫的方式，以下劃線分隔
eg：my_project_name2 有復(fù)數(shù)結(jié)構(gòu)時(shí)，要采用復(fù)數(shù)命名法
eg：scripts 、styles 、 images 、 data_models
HTML
1 縮進(jìn)使用soft tab (4個(gè)空格)
2 在屬性上，使用雙引號(hào)，不要使用單引號(hào)
3 不要忽略自動(dòng)閉合標(biāo)簽結(jié)尾處使用斜線和可選的關(guān)閉標(biāo)簽
eg：<img /> , <li></li>4 lang 屬性 規(guī)定加上，常用的有如下
<html lang="en-us"></html>
<html lang="zh-cn"></html>
<html lang="zh-hk"></html>
<html lang="zh-tw"></html>5 字符編碼 指定為"UTF-8"
6 IE兼容模式： 用
<meta>標(biāo)簽指定頁面應(yīng)該用什么版本的IE來渲染，可通過連接鏈接了解更多
eg：<meta http-equiv="X-UA-Compatible content="IE=Edge"/>
-
7 引入css,js：不需要指明type
<link rel="stylesheet" href="code_guide.css/><!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script>-
8 屬性順序：屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性
* class * id * name * src , value , data-* , href * for , type , max-length , max , min , pattern * placeholder, title, alt * aria-*, role * required , readonly , disabled 9 boolean屬性：不需要聲明取值的屬性
eg：<input type="text" disabled />
<input type="checkbox" value="1" checked />
<select>
<option value="1" selected >1</option>
</select>
-
- 10 減少標(biāo)簽數(shù)量：需要盡量避免多余的父節(jié)點(diǎn)
CSS
-
1 分號(hào) 空格
以下幾種情況不需要空格：屬性名后 多個(gè)規(guī)則的分隔符','前 !important'!'后 屬性值中'('后和')'前 行末不要有多余的空格 以下幾種情況需要空格： 屬性值前 選擇器'>', '+', '~'前后 '{'前 !important '!'前 @else前后 屬性值中的','后 注釋'/*'后和'*/'前 eg： .element, .dialog, .element > .dialog{ color: red !important; background-color: rgba(0, 0, 0, .5); } -
2 空行 換行
以下幾種情況需要空行： 文件最后保留一個(gè)空行 '}'后最好跟一個(gè)空行，包括scss中嵌套的規(guī)則 屬性之間需要適當(dāng)?shù)目招? 以下幾種情況不需要換行： '{'前 以下幾種情況需要換行： '{'后和'}'前 每個(gè)屬性獨(dú)占一行 多個(gè)規(guī)則的分隔符','后 eg： .element, .dialog, .element > .dialog{ color: red !important; background-color: rgba(0, 0, 0, .5); } .dialog { color: red; &:after { ... } } 3 屬性聲明順序
// 下面是推薦的屬性的順序
[
[
"display",
"visibility",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"clip",
"zoom"
],
[
"table-layout",
"empty-cells",
"caption-side",
"border-spacing",
"border-collapse",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image"
],
[
"-webkit-box-orient",
"-webkit-box-direction",
"-webkit-box-decoration-break",
"-webkit-box-pack",
"-webkit-box-align",
"-webkit-box-flex"
],
[
"position",
"top",
"right",
"bottom",
"left",
"z-index"
],
[
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"-webkit-box-sizing",
"-moz-box-sizing",
"box-sizing",
"border",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"-webkit-border-radius",
"-moz-border-radius",
"border-radius",
"-webkit-border-top-left-radius",
"-moz-border-radius-topleft",
"border-top-left-radius",
"-webkit-border-top-right-radius",
"-moz-border-radius-topright",
"border-top-right-radius",
"-webkit-border-bottom-right-radius",
"-moz-border-radius-bottomright",
"border-bottom-right-radius",
"-webkit-border-bottom-left-radius",
"-moz-border-radius-bottomleft",
"border-bottom-left-radius",
"-webkit-border-image",
"-moz-border-image",
"-o-border-image",
"border-image",
"-webkit-border-image-source",
"-moz-border-image-source",
"-o-border-image-source",
"border-image-source",
"-webkit-border-image-slice",
"-moz-border-image-slice",
"-o-border-image-slice",
"border-image-slice",
"-webkit-border-image-width",
"-moz-border-image-width",
"-o-border-image-width",
"border-image-width",
"-webkit-border-image-outset",
"-moz-border-image-outset",
"-o-border-image-outset",
"border-image-outset",
"-webkit-border-image-repeat",
"-moz-border-image-repeat",
"-o-border-image-repeat",
"border-image-repeat",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height"
],
[
"font",
"font-family",
"font-size",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"line-height",
"text-align",
"-webkit-text-align-last",
"-moz-text-align-last",
"-ms-text-align-last",
"text-align-last",
"vertical-align",
"white-space",
"text-decoration",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-indent",
"-ms-text-justify",
"text-justify",
"letter-spacing",
"word-spacing",
"-ms-writing-mode",
"text-outline",
"text-transform",
"text-wrap",
"-ms-text-overflow",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"-ms-word-wrap",
"word-wrap",
"-ms-word-break",
"word-break"
],
[
"color",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"-ms-background-position-x",
"background-position-x",
"-ms-background-position-y",
"background-position-y",
"-webkit-background-clip",
"-moz-background-clip",
"background-clip",
"background-origin",
"-webkit-background-size",
"-moz-background-size",
"-o-background-size",
"background-size"
],
[
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"opacity",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
"-ms-interpolation-mode",
"-webkit-box-shadow",
"-moz-box-shadow",
"box-shadow",
"filter:progid:DXImageTransform.Microsoft.gradient",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
"text-shadow"
],
[
"-webkit-transition",
"-moz-transition",
"-ms-transition",
"-o-transition",
"transition",
"-webkit-transition-delay",
"-moz-transition-delay",
"-ms-transition-delay",
"-o-transition-delay",
"transition-delay",
"-webkit-transition-timing-function",
"-moz-transition-timing-function",
"-ms-transition-timing-function",
"-o-transition-timing-function",
"transition-timing-function",
"-webkit-transition-duration",
"-moz-transition-duration",
"-ms-transition-duration",
"-o-transition-duration",
"transition-duration",
"-webkit-transition-property",
"-moz-transition-property",
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"-webkit-transform",
"-moz-transform",
"-ms-transform",
"-o-transform",
"transform",
"-webkit-transform-origin",
"-moz-transform-origin",
"-ms-transform-origin",
"-o-transform-origin",
"transform-origin",
"-webkit-animation",
"-moz-animation",
"-ms-animation",
"-o-animation",
"animation",
"-webkit-animation-name",
"-moz-animation-name",
"-ms-animation-name",
"-o-animation-name",
"animation-name",
"-webkit-animation-duration",
"-moz-animation-duration",
"-ms-animation-duration",
"-o-animation-duration",
"animation-duration",
"-webkit-animation-play-state",
"-moz-animation-play-state",
"-ms-animation-play-state",
"-o-animation-play-state",
"animation-play-state",
"-webkit-animation-timing-function",
"-moz-animation-timing-function",
"-ms-animation-timing-function",
"-o-animation-timing-function",
"animation-timing-function",
"-webkit-animation-delay",
"-moz-animation-delay",
"-ms-animation-delay",
"-o-animation-delay",
"animation-delay",
"-webkit-animation-iteration-count",
"-moz-animation-iteration-count",
"-ms-animation-iteration-count",
"-o-animation-iteration-count",
"animation-iteration-count",
"-webkit-animation-direction",
"-moz-animation-direction",
"-ms-animation-direction",
"-o-animation-direction",
"animation-direction"
],
[
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"cursor",
"-webkit-user-select",
"-moz-user-select",
"-ms-user-select",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"-moz-tab-size",
"-o-tab-size",
"tab-size",
"-webkit-hyphens",
"-moz-hyphens",
"hyphens",
"pointer-events"
]
]
4 媒體查詢：盡量將媒體查詢的規(guī)則靠近與他們相關(guān)的規(guī)則，不要將他們一起放到一個(gè)獨(dú)立的樣式文件中，或者丟在文檔的最底部，這樣做只會(huì)讓大家以后更容易忘記他們。
5 不要在一個(gè)文件里出現(xiàn)兩個(gè)相同的規(guī)則
eg：用 border: 0; 代替 border: none;
JS
- 1 分號(hào)
以下幾種情況后需加分號(hào)：
變量聲明
表達(dá)式
return
throw
break
continue
do-while
- 2 引號(hào)：最外層統(tǒng)一使用單引號(hào)。
var y = 'foo',
z = '<div id="test"></div>';
- 3 變量命名
標(biāo)準(zhǔn)變量采用駝峰式命名（除了對(duì)象的屬性外，主要是考慮到cgi返回的數(shù)據(jù)）
'ID'在變量名中全大寫
'URL'在變量名中全大寫
'Android'在變量名中大寫第一個(gè)字母
'iOS'在變量名中小寫第一個(gè)，大寫后兩個(gè)字母
常量全大寫，用下劃線連接
構(gòu)造函數(shù)，大寫第一個(gè)字母
jquery對(duì)象必須以'$'開頭命名
- 4 括號(hào)
下列關(guān)鍵字后必須有大括號(hào)（即使代碼塊的內(nèi)容只有一行）：
if,
else,
for,
while,
do,
switch,
try,
catch,
finally,
with,
- 5 null
適用場(chǎng)景：
初始化一個(gè)將來可能被賦值為對(duì)象的變量
與已經(jīng)初始化的變量做比較
作為一個(gè)參數(shù)為對(duì)象的函數(shù)的調(diào)用傳參
作為一個(gè)返回對(duì)象的函數(shù)的返回值
不適用場(chǎng)景：
不要用null來判斷函數(shù)調(diào)用時(shí)有無傳參
不要與未初始化的變量做比較
- 6 undefined
//永遠(yuǎn)不要直接使用undefined進(jìn)行變量判斷；
//使用typeof和字符串'undefined'對(duì)變量進(jìn)行判斷。
if (typeof person === 'undefined') { ...}
- 7 jshint
1、用'===', '!=='代替'==', '!='；
2、for-in里一定要有hasOwnProperty的判斷；
3、不要在內(nèi)置對(duì)象的原型上添加方法，如Array, Date；
4、不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量；
5、變量不要先使用后聲明；
6、不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個(gè)變量；
7、不要在同個(gè)作用域下聲明同名變量；
8、不要在一些不需要的地方加括號(hào)，例：delete(a.b)；
9、不要使用未聲明的變量（全局變量需要加到.jshintrc文件的globals屬性里面）；
10、不要聲明了變量卻不使用；
11、不要在應(yīng)該做比較的地方做賦值；
12、debugger不要出現(xiàn)在提交的代碼里；
13、數(shù)組中不要存在空元素；
14、不要在循環(huán)內(nèi)部聲明函數(shù)；
15、不要像這樣使用構(gòu)造函數(shù)，例：new function () { ... }, new Object；
if (a === 1) {
a++;
}
for (key in obj) {
if (obj.hasOwnProperty(key)) {
// be sure that obj[key] belongs to the object and was not inherited
console.log(obj[key]);
}
}
var person = new Person();
