CSS格式化工具
一直想自己寫個css格式化工具,因?yàn)樵鹊摹禖SS代碼格式化和壓縮化》工具,壓縮or格式化的都不是我的編碼習(xí)慣。我的格式化工具也許代碼方面細(xì)節(jié)方面都沒他的好,但是符合自身需要的東西才是好東西。
從去年剛學(xué)CSS到上個月初,應(yīng)該正好一年時間。這一年時間,我的CSS編碼習(xí)慣一直是這樣的:
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;
}
直到上月的中旬開始,我才開始轉(zhuǎn)變自己的編碼習(xí)慣,因?yàn)檫@種編碼格式,占的CSS行數(shù)太多,不利于查看,尤其是在做大項(xiàng)目的時候。所以我開始采用了下面的CSS編碼習(xí)慣:
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權(quán)威指南》、到公司閑著沒事搜索相關(guān)文章(《精通 JS正則表達(dá)式》),晚上成功寫出了半成品。為什么說是半成品呢,因?yàn)橹幌抻谖易约旱木幋a習(xí)慣來操作,別人的CSS未必能很好的格式化出來= =(今天又修改了一下,現(xiàn)在應(yīng)該是完結(jié)版了-2013.07.04)
好吧,曬下地址,歡迎批評指正~
CSS格式化工具:
http://sandbox.runjs.cn/show/gvnlsgu7
總結(jié)
- 上一篇: 点痣后注意事项(点痣会留疤吗?)
- 下一篇: Logstash的简单介绍