我們編碼的程式碼往往不夠規範,雖然先前本站提供了許多的想法和經驗,但仍無法改變程式碼雜亂的現象。今天向大家介紹重新組織CSS程式碼的利器-Styleneat。
Styleneat 能夠把 CSS 的選擇器(selectors),子選擇器( sub-selectors)和屬性(properties)依照層式結構化重新組織,這使得程式設計師更容易去定義頁面區域和檢視它們之間的關係。 Styleneat 是一個能夠幫你重新組織你 CSS 屬性的免費服務。
Styleneat例如它會把下面這段 CSS 程式碼
Example Source Code
[www.downcodes.com] id1 { width: 100px; }
id1 .class1 { background: #000; }
id1 .class1 a { text-decoration: none; color: #fff; }
id1 .class1 a span { text-indent: 10px; }
id2 { width: 200px; }
重新組織成:
Example Source Code
[www.downcodes.com] id1 { width: 100px; }
id1 .class1 { background: #000; }
id1 .class1 a { color: #fff; text-decoration: none; }
id1 .class1 a span { text-indent: 10px; }
id2 { width: 200px; }
Styleneat 有三種使用方式:
Example Source Code
[www.downcodes.com] 1.直接貼上 CSS 程式碼。
2、上傳一個 CSS 檔。
3、提供 CSS 文件的 URL 位址。
另外 Styleneat 也提供一些選項,例如依照 CSS 選擇的字母順序排列,單行格式或多行格式等。 Styleneat 在 CSS 優化方面還是提供了比較多的幫助。
http://styleneat.com/