程式風格就如人的性格一般,不同程式設計師(設計師)的書寫風格往往不盡相同,良好的風格更容易讓其他人接受。就拿 WordPress 主題來說,我們或許更偏好使用程式碼風格良好、符合我們口味的主題檔案。而對於那些凌亂不堪、難以閱讀的 CSS 文件,在我們不得不去研究的時候該怎麼辦?您可以使用『Styleneat』將CSS 的selectors(選擇器)、sub-selectors(子選擇器)和properties(屬性)按照層疊式結構化重新組織與構建,從而讓CSS 檔案更加整潔易讀,這樣就能更容易定義頁面佈局和查看不同結構之間的關係了。
『
Styleneat ’CSS 檔案結構格式重新組織服務,可以將書寫風格凌亂的 CSS 檔案依照層疊結構重新組建,方便您進行閱讀和研究,十分實用的一個線上工具。
您可以透過三種不同的方式使用:1.直接貼上程式碼;2.上傳 CSS 檔案;3.輸入 CSS 檔案所在位址。另外還有一些選項設定:依照 CSS 的屬性、選擇器字母順序排列;兼重組導入的 CSS;多行或單行格式;開啟安全重組模式。
我們來看看使用的效果:
原始碼:
Example Source Code
[www.downcodes.com]
#menubar .menus {
background:#E9EEF1;
float:left;
padding:0 10px;
}
#menubar .menus li {
float:left;
border-style:solid;
border-color:#FFF;
border-width:0 1px;
margin-left:-1px;
list-style-type:none;
}
#menubar .menus li a { display:block;text-decoration:none;padding:5px 10px;}
#menubar .menus li a:hover {
background:#EEDDCC;
list-style-type:none;
}
#menubar .menus .current_page_item {
background:#FFF;
font-weight:bold;
}
#menubar .menus li.current_page_item a:hover {
background:#FFF;
}
重新組構後的程式碼:
Example Source Code
[www.downcodes.com]
#menubar .menus {
background:#E9EEF1;
float:left;
padding:0 10px; }
#menubar .menus li {
float:left;
border-style:solid;
border-color:#FFF;
border-width:0 1px;
margin-left:-1px;
list-style-type:none; }
#menubar .menus li a {
display:block;
text-decoration:none;
padding:5px 10px; }
#menubar .menus li a:hover {
background:#EEDDCC;
list-style-type:none; }
#menubar .menus .current_page_item {
background:#FFF;
font-weight:bold; }
#menubar .menus li.current_page_item a:hover { background:#FFF; }