強迫症 代碼對齊 html css js

 

常常寫html，css和js(基本上都是jquery)，慢慢的養成習慣，有了一套本身喜歡的代碼對齊方式，看起來也滿整齊。

html：

關於html，對齊方式基本相同，子元素縮進就能夠了，如圖：

 

 

css：

不少人喜歡把css寫在一行，總體看一行一行的彷佛滿整齊，其實看起來很費勁，若是真要在意那幾KB的文件大小的話，徹底能夠用工具格式化壓縮，本身看着方便清晰纔好。

書寫規則：

1. 單屬性成行，如圖：

 

 

2.多屬性成列，如圖：

 

 

3.層級選擇器成行，如上兩圖

 

4.多選擇器成列，如圖：

 

 

5.每組之間空一行分割，如圖：

 

 

6.多選擇器單獨設置單屬性，或css-sprite，公用與單設之間空一行分割，單設不空行，如圖：

 

 

js：

主要是jquery縮進，js縮進大體都相同。適當添加註釋，有利於閱讀。

書寫規則：

若方法多餘兩個或三個，選擇語句自成一行，每一個方法換行縮進，若此方法改變了選擇語句，則以後的方法再次縮進，每一個方法以.開頭。如圖：