CSS 美化工具

CSS 美化工具可將經過壓縮、混淆或縮排不一致的樣式表重新格式化為乾淨、易讀的 CSS——一致的縮排、排序後的屬性，以及規則之間清晰的間距——讓你真正能夠閱讀、審查和編輯它。貼上壓縮後的樣式表、打包的 CSS 檔案，或凌亂的手寫 CSS，即可立即取得格式化後的輸出。

• •縮排：2 個空格、4 個空格或定位符，透過真正的 js-beautify 格式化引擎套用
• •屬性排序：在每個規則區塊內依字母順序排列宣告，形成一致、易於掃視的風格
• •媒體查詢排序：依斷點對頂層 @media 區塊排序，min-width 遞增、max-width 遞減
• •規則間距：在規則之間加入空行以達到視覺分隔，或保持輸出緊湊
• •註解保留：格式化時保留或移除 /* ... */ 註解
• •顏色正規化：在通道允許的情況下，將 6 位十六進位顏色和 rgb() 值縮短為 3 位十六進位簡寫

• •閱讀壓縮後的正式環境樣式表，在瀏覽器開發者工具中除錯版面問題
• •重新格式化從聊天訊息、PDF 或郵件中貼上、遺失原始縮排的 CSS
• •在程式碼審查前統一屬性順序和縮排
• •讓打包或產生的樣式表——來自 CSS-in-JS 建置或預處理器輸出——足夠可讀以便審查
• •在提交前清理從設計工具匯出的 CSS

1. 1.將 CSS 貼到輸入編輯器，或上傳 .css 檔案
2. 2.選擇縮排——2 個空格、4 個空格或定位符
3. 3.依需要開啟註解保留、屬性排序、媒體查詢排序、規則間距和顏色正規化
4. 4.格式化後的輸出會隨輸入自動顯示
5. 5.複製輸出或下載為 .css 檔案

• •依字母順序排序屬性可能會將邏輯相關的宣告分開，例如 margin 和 margin-top——在將其作為嚴格的風格規則採用之前，請先檢查排序後的輸出
• •帶廠商前綴的屬性（-webkit-、-moz-）會與其無前綴的對應項一起排序，這可能會將帶前綴的備援方案排在標準屬性之後
• •大括號檢查器會在你輸入時標記不匹配的 { 和 }，但這是一種啟發式掃描，而非完整的 CSS 剖析器——無法捕捉所有類型的無效語法

• •這是一個格式化工具，不是程式碼檢查工具——它不會捕捉無效的屬性名稱、瀏覽器相容性問題，或選擇器優先級衝突
• •非常大的樣式表（數 MB 的打包檔案）在瀏覽器中美化可能較慢——對於大規模程式碼庫格式化，整合於建置工具的格式化程式（Prettier、Stylelint --fix）更為合適
• •要在團隊範圍內強制執行一致的 CSS 風格，整合在編輯器/CI 中的專用工具（如 Stylelint 或 Prettier）比臨時的瀏覽器格式化更合適

如果你有可讀的 CSS，需要為正式環境進行壓縮——縮小檔案體積和頁面載入時間——請改用 CSS 壓縮工具。它會摺疊空白、縮短顏色值，並可以移除多餘的零以實現最大壓縮。