一直想自己寫個css格式化工具，因為原先的《CSS代碼格式化和壓縮化》工具，壓縮or格式化的都不是我的編碼習慣。我的格式化工具也許代碼方面細節方面都沒他的好，但是符合自身需要的東西才是好東西。

從去年剛學CSS到上個月初，應該正好一年時間。這一年時間，我的CSS編碼習慣一直是這樣的：

body,div,h1,h2,h3,h4,h5,h6,p,td,tr,form,ul,ol,li,dl,dt,dd,input,button,textarea{
    margin:0;
    padding:0;
}
table{
    border-collapse:collapse;
    border-spacing:0;
    margin:0;
    padding:0;
    line-height:17px;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
fieldset,img{
    border:none;
}
ul,ol,li{
    list-style:none;
    vertical-align:bottom;
}
a,a:link,a:visited,a:hover,a:active{
    text-decoration:none;
}

直到上月的中旬開始，我才開始轉變自己的編碼習慣，因為這種編碼格式，占的CSS行數太多，不利于查看，尤其是在做大項目的時候。所以我開始采用了下面的CSS編碼習慣：

body,div,h1,h2,h3,h4,h5,h6,p,td,tr,form,ul,ol,li,dl,dt,dd,input,button,textarea{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0;margin:0;padding:0;line-height:17px}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
fieldset,img{border:none}
ul,ol,li{list-style:none;vertical-align:bottom}
a,a:link,a:visited,a:hover,a:active{text-decoration:none}
.clear{clear:both}
.clearfix:after{display:block;content:"";clear:both;height:0}
.clearfix{*zoom:1}

這種方式，明顯看起來更清爽一些。但是這種又不利于閱讀，既然以前收藏的《CSS代碼格式化和壓縮化》工具滿足不了我的需求，那就自己寫個好了。于是今天一大早起來看《javascript權威指南》、到公司閑著沒事搜索相關文章（《精通 JS正則表達式》），晚上成功寫出了半成品。為什么說是半成品呢，因為只限于我自己的編碼習慣來操作，別人的CSS未必能很好的格式化出來= =（今天又修改了一下，現在應該是完結版了-2013.07.04）

好吧，曬下地址，歡迎批評指正~

CSS格式化工具：
http://sandbox.runjs.cn/show/gvnlsgu7

總結

以上是生活随笔為你收集整理的CSS格式化工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。