CSS 美化的運作原理
美化器逐字元讀取樣式表，追蹤每個區塊的巢狀深度，然後以一致的間距重新輸出。它不會改變樣式的任何效果——只改變程式碼的外觀。
- 詞法分析. 函式庫將輸入掃描為一串 token：選擇器、屬性名稱、值、at 規則、注釋，以及分隔它們的花括號、冒號和分號。字串和 url() 值被識別為單一單元，因此 content 屬性中的花括號不會被誤判為區塊分隔符。
- 追蹤巢狀. 在走訪 token 串流時，美化器維護一個即時縮排層級。任何左花括號——無論是規則區塊、媒體查詢還是關鍵影格區塊——都會使層級加深，每個右花括號使層級退回。這個深度決定了輸出中每行前方的縮排單位數量。
- 套用選項. 縮排選擇（2 個空格、4 個空格或 Tab）確定一個縮排層級的寬度。花括號風格決定左花括號是緊接在選擇器後面，還是獨占一行。其餘切換開關可在規則區塊之間加入空行，或將分組選擇器拆分到獨立行。
- 重新輸出. 最後，格式化器依照計算好的縮排和換行規則列印 token，每個宣告獨占一行，每個冒號後加單一空格。結果是相同的樣式表，以人類可以掃視 cascade 結構的方式呈現。
為什麼要美化 CSS
- 閱讀壓縮樣式表. 正式 CSS 以單行形式發布，規則之間沒有間距。美化可以恢復換行和縮排，讓你即使沒有 source map 也能找到版面 bug 背後的選擇器，並查看其確切宣告內容。
- 整理格式不一致的檔案. 多人協作的樣式表往往出現混合縮排和花括號風格。一次美化能將整個檔案統一為單一版面，使下一次 diff 只顯示真正的 cascade 變更，而不是空白雜訊。
- 本工具不拖慢你的頁面. 大多數線上格式化工具在你開啟頁面時就載入整個函式庫。本工具只在你點擊「美化」或開啟即時模式時才延遲載入 js-beautify，因此開啟頁面只消耗幾千位元組而非數百千位元組，初始渲染保持快速。
- 程式碼不離開你的瀏覽器. 美化器完全在你的裝置上執行。你的 CSS 從不上傳到伺服器——當你審查的樣式表屬於客戶、包含內部類別名稱或受保密協議約束時，這一點格外重要。
常見應用場景
凡是需要閱讀並非為了可讀性而撰寫的樣式表時，美化 CSS 就派上用場。
- 除錯正式環境：從 Network 面板複製壓縮樣式表，貼到這裡，找出覆蓋了預期版面的規則。
- 程式碼審查準備：在提交 PR 前，將貢獻者縮排不一致的樣式表重新格式化，讓審查者看到 cascade 變更，而非版面雜亂。
- 學習與稽核：展開框架或元件函式庫的樣式表，研究其選擇器、媒體查詢和自訂屬性的結構。
一個實際操作範例
取一個壓縮的單行程式碼：a{color:red;margin:0}b{padding:0}。將縮排設為 2 個空格、花括號風格設為收緊，貼到上方並點擊美化。你將得到可讀的區塊：a { 獨占一行，color: red; 和 margin: 0; 宣告各自縮排一層，右花括號對齊在選擇器下方，b 規則緊隨其後。將花括號風格切換為展開，每個左花括號將獨占一行。縮排改為 Tab，每個層級從兩個空格變為 Tab 字元。樣式完全一致，只有版面不同。
FAQ
這在我的瀏覽器中執行嗎？
是的。js-beautify 函式庫在你第一次點擊「美化」或啟用即時模式時延遲載入，然後快取。你的 CSS 不會離開頁面——沒有伺服器往返，也沒有上傳。
美化和反壓縮是同一回事嗎？
它可以恢復可讀的格式——縮排、換行和間距——但無法找回壓縮時刪除的注釋，或恢復檔案中從未存在的結構。它只對現有的宣告和選擇器重新格式化。
美化會改變樣式的渲染效果嗎？
不會。美化只增減空白和換行；cascade 不受影響，頁面渲染效果完全一致。屬性順序、優先度和值都保持原樣。
花括號風格選項是什麼意思？
「收緊」將左花括號保留在選擇器同一行（a {），這是常見的 CSS 慣例。「展開」將每個左花括號放到獨占的新行。空行和每個選擇器獨占一行的開關控制規則區塊之間的間距，以及 h1, h2, h3 等分組選擇器的版面方式。
瀏覽器端 CSS 美化讓你無需建置步驟或上傳就能獲得可讀的樣式表。貼上壓縮或雜亂的檔案，選擇縮排和花括號風格，然後複製或下載結果。程式碼不離開你的裝置，無需帳號，函式庫只在你需要時才載入——開啟本頁面只花費幾千位元組，而不是幾兆位元組。