多年前寫過一篇「CSS 撰寫技巧及規範」，分享了習慣的 CSS 維護作法。長時間使用下來，作業若要更有效率的話，我還想再進一步優化，例如：
- 經過壓縮的 CSS 碼，不要沒有任何空格，想辦法增加可讀性。
- CSS 屬性希望能完全按照自訂的邏輯來排序，把可能需要修改數值的屬性放在前面，這樣維護比較方便。
一、外掛效果說明
假設原本雜亂的 CSS 碼經過美化工具轉換後，長得像這樣：#nav {
background: #fff;
display: block;
}
#nav a {
color: #555;
line-height: 40px;
position: relative;
display: inline-block;
min-width: 35px;
text-align: center;
text-decoration: none;
border: 0;
padding: 0 15px;
}
雖然說看起來美觀、一目了然，但我個人覺得維護上很不方便，因為螢幕範圍能顯示的資訊太少，以上兩筆 CSS 資料就佔據了 15 行的空間，要移動到其他維護的 CSS 碼時，需要花費很多時間不斷往上、往下捲動螢幕。
1. 自訂壓縮格式
所以我習慣將單筆 CSS 資料壓縮成一行以節省空間，以前介紹過的 CSS 線上工具「code beautifier」，可作到這點：
#nav{background:#fff;display:block;}
#nav a{color:#555;line-height:40px;position:relative;display:inline-block;min-width:35px;text-align:center;text-decoration:none;border:0;padding:0 15px;}
不過缺點是，所有字符全部黏在一起，缺乏可讀性。
我找到的解決方案是 Sublime Text 套件「CSS Format」，提供了多種格式，可美化也可壓縮，其中的 "Compact" 格式正合我意，轉換後的效果如下：
#nav { background: #fff; display: block; }
#nav a { color: #555; line-height: 40px; position: relative; display: inline-block; min-width: 35px; text-align: center; text-decoration: none; border: 0; padding: 0 15px; }
以上程式碼可看出，CSS 選擇器、屬性、數值都多了空格隔開，比全部壓縮成一團容易分辨多了。
2. 自訂屬性排列方式
CSS 維護久了就會希望，重要的屬性能一眼看到，且比較可能修改的屬性與數值能排列在前面。前端工程師很常做的一個動作是，將別人網頁上看到不錯的 CSS 效果"借"過來用，而整串 CSS 碼複製過來後，由於屬性排列方式跟習慣不同，常常要自己手動調整順序也是很花時間。
自從找到 Sublime Text 這個套件「CleanCSS」後，這件事就再也不必手動，按個熱鍵 CSS 全部按設定好的順序自動排列整齊。
例如我會希望最重要的 position、display 出現在最前面，接著是最常需要修改的數值 margin、padding、width、height 等，接著是有可能要調整的 color、background、font-size 等，其他不需要修改的放最後面。
經以上我的需求利用此套件進行轉換，結果將如以下，效果很滿意：
#nav { display: block; background: #fff; }
#nav a { position: relative; display: inline-block; min-width: 35px; padding: 0 15px; color: #555; line-height: 40px; text-align: center; text-decoration: none; border: 0; }
二、ST 套件 CSS Format
1. 安裝 進入 ST → 按- Expanded：展開模式，最美觀的格式
- Compact：簡潔模式，兼顧美觀與壓縮
- Compressed：壓縮模式，最節省空間
{
"keys": ["ctrl+alt+]"],
"command": "css_format",
"args": {
"action": "compact"
}
},
以上範例碼可自行修改熱鍵按法，三、ST 套件 CleanCSS
1. 安裝 進入 ST → 按- add_space_between_categories
- add_space_between_rules
- vertically_align_selector_property_values
{"keys":["f6"], "command" : "clean_css"},
以上範例碼可自行修改熱鍵按法，然後複製起來。
接下來 Preference → Key Bindings，會開啟 ST 系統的自訂熱鍵設定檔，將前面的範例碼，複製到此檔參數的最前面，存檔後可立即生效。
5. 操作
CleanCSS 經測試後，操作相容性比較差，必須在嚴格的條件下才能生效，如果使用技巧不對，會覺得相當難用：
- 不能跟 HTML 碼混合使用
- CSS 碼如果未經美化的話，格式不對就不會生效
- 如果 ST 有裝「HTML/CSS/JS Prettify」的話，可以先執行一次將 CSS 碼美化
- 或者有裝前面「CSS Format」套件的話，可以為 Expanded 模式設定一個熱鍵，先執行此模式進行 CSS 美化
- 然後再執行「CleanCSS」的熱鍵，就能自動調整 CSS 屬性順序。
四、補充
以下補充一些使用心得：- 先執行 CleanCSS 後，會自動產生第一行空白，我找不到參數設定可以避免此不必要的現象。
- 不過接著執行 CSS Format 後，會自動移除第一行空白
- 所以依照這樣的順序執行，流程就非常流暢了。
更多 Sublime Text 相關文章：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。