我必須調試的最糟糕的 CSS 是作為一個 40,000 個字元的行到達的。建置步驟連接並縮小了專案中的每個部分,接近尾聲的規則是覆蓋它不應該擁有的顏色,並且無法看到級聯,因為沒有換行符可以看到它。我已經跨 WordPress 主題和 React 應用程式發送了足夠的前端,知道您無法閱讀的樣式表是無法修復的樣式表,所以我建立了一個 css 格式化程式 在 工具。dev 這將文字牆重新變成一個漿糊中的縮排、可掃描的 CSS,並在您準備好發貨時再次將其縮小。這是它的指南以及什麼"格式化 CSS"實際上意味著。
TL;DR: CSS 格式化程式重新縮排具有一致間距的樣式表,以便可讀,而 CSS 縮小器則將間距拉回,以便檔案變小。工具 css 格式化程式 兩者都從一個輸入中執行。它將 CSS 解析為規則、選擇器、聲明、at 規則和解註,然後列印該結構,選擇兩個空格、四個空格或製表符,或將其折疊到最小的有效等效值。嵌套的
@media和@keyframes塊,url()值和引用的字串都完好無損地保存下來,並且所有內容都在客戶端運行,因此您的 CSS 永遠不會離開瀏覽器。
什麼是 CSS 格式化程式?
CSS 格式化程式讀取樣式表並以可預測、一致的空格重寫它。規則本身不會改變。選擇器、屬性和值前後相同,瀏覽器應用格式化的檔案與應用原始檔案完全相同。更改的是佈局:每行一個聲明,每個冒號後面有一個空格,每個區塊的縮排比其父級深一級,以及其自己的行上的閉包。結果是一個人類可以掃描的檔案。
在幕後,該工具不會在空白處進行查找和替換,而空白處是樸素格式化程式出錯的地方。它首先將 CSS 解析為其真實結構。樣式表是一系列節點:將選擇器與聲明區塊配對的樣式規則,例如 @media 或者 @import、評論和聲明本身。一旦 CSS 成為這些節點的樹,用您喜歡的任何縮排將其列印回即可簡單且至關重要的是安全。解析器讓格式化程式知道裡面有一個逗號 :not(a, b) 是選擇器的一部分,而兩者之間是逗號 h1 和 h2 將兩個選擇器分開,a 內有一個分號 url() 資料 URI 不是聲明的結尾。
相同的解析為相反的操作提供動力。因為工具已經了解結構,所以它可以完全不帶縮排地列印樹,這正是縮小化的含義。這就是為什麼一個工具涵蓋了這兩個工作:格式化和縮小化是相同的解析,以兩種不同的方式列印。
格式化和縮小 CSS 有什麼不同?
這些是同一軸的兩端,知道你想要哪一個可以避免混亂。格式化,也稱為美化或漂亮列印,為了人們的利益而添加空白。為了機器和網路的利益,縮小刪除空白。您對閱讀和編輯的副本進行格式化;您縮小發送到瀏覽器的副本。
這種區別很重要,因為它們屬於您工作流程中的不同點。當您編寫 CSS 時,或當您繼承了需要理解的文件時,您希望對其進行格式化。部署時,您希望將其縮小,以便瀏覽器下載更少的位元組並更快地繪製。大多數建置管道會自動縮小,但很多情況都超出了建置範圍:從 CodePen 貼上片段、從您正在審核的頁面中提取的樣式表、直接在 CMS 中編輯的主題文件。對於這些,獨立的格式化程式和縮小器是最快的路徑。
這是一眼看去的分裂。
| 方面 | 格式(美化) | 縮小 |
|---|---|---|
| 觀眾 | 人們閱讀和編輯 | 瀏覽器下載 |
| 空白 | 添加是為了可讀性 | 完全刪除 |
| 評論 | 預設保留 | 預設刪除 |
| 文件大小 | 更大 | 盡可能小 |
| 什麼時候使用 | 寫作、調試、評論 | 運送至生產 |
如何使用此工具格式化 CSS?
流程故意縮短。將 CSS 貼到輸入中,選擇美化或縮小,然後讀取結果。美化時,選擇兩個空格、四個空格或選項卡以符合您的項目'編輯器設置,並決定是否保留評論。這 css 格式化程式 使用大小徽章顯示輸出,以便您可以看到位元組變化,並將任何解析通知(例如不平衡大括號)列為警告,而不是默默失敗。
這四個步驟在實踐中看起來像這樣。首先,貼上樣式表,無論是縮小的、手寫的還是從工具匯出的。其次,按一下「美化」重新縮排或「縮小」將其剝離。第三,查看輸出和尺寸徽章,並查看任何警告。第四,將結果複製到剪貼簿或下載為 .css 文件已準備好放入您的專案中。沒有上傳步驟,也沒有帳戶,因為整件事都發生在您的瀏覽器中。
如果您使用其他結構化格式,Toolz 上會出現相同的模式。這 json 格式化程式 美化和縮小 JSON, html 格式化程式 對標記也這樣做,並且 sql 格式化程式 處理查詢。格式化是一個總體想法,每種語言具有相同的工具形狀可以保持肌肉記憶的一致性,這是一個主題 web 開發人員工具包 指南進一步發展。
格式化會改變我的風格的工作方式嗎?
不,這就是該工具在生產 CSS 上安全運行的保證。僅美化和縮小觸控空白以及可選的評論。它們永遠不會重新排序聲明,永遠不會重新命名任何內容,永遠不會合併或刪除規則,永遠不會重寫值。選擇器的特殊性不變,驅動級聯的來源順序不變,瀏覽器中計算的結果是位元組對位元組等效的。
這值得明確說明,因為一些 CSS 優化器的作用遠遠超出了縮小:它們合併重複的選擇器,刪除它們判斷未使用的規則,並重新排序屬性。這些轉換可以以微妙的方式改變行為,尤其是當級聯或 a 時 !important 涉及。這個格式化程式故意不做任何這些。它是一個空白工具。如果您美化文件、不編輯任何內容並再次縮小該文件,則這兩個文件在功能上是相同的,這意味著您可以毫無恐懼地自由往返。
定義什麼是空格以及什麼是微不足道的 CSS 語法在 中指定 CSS 語法模組等級 3 來自 W3C。格式化程式遵循語法's 標記器模型,這就是為什麼它處理字串標記或 a 內的空格 url() 與聲明之間的空白不同。
它如何處理@media、@keyframes 和其他 at 規則?
At 規則是隨意格式化程式崩潰的地方,因為 at 規則可以以分號結尾,也可以包裝整個其他規則。 @import "base.css"; 是一個以分號結尾的語句。 @media (max-width: 600px) { ... } 是一個包含自己的巢狀規則的區塊,並且這些巢狀規則需要縮排比該區塊深一級 @media 行本身。查找和替換方法無法區分兩者;解析器可以。
因為這個工具建構了一棵真正的樹,一個嵌套的樹 @media block 在美化時保持其內部規則正確縮排,在縮小時保持其內部規則正確折疊。同樣成立 @supports 功能查詢和 @keyframes 動畫,每個百分比的步驟都類似 0% 和 100% 是動畫中自己的區塊。字體聲明在 @font-face 並分層 @layer 規則以同樣的方式處理。無論樣式表達到什麼嵌套深度,縮排都會追蹤它。
這種結構意識也保護值中看起來像語法但不像語法的部分。 A url() 可以包含一個包含 base64 的資料 URI,其中包括分號和冒號,以及 a content 屬性可以保存一個引用的字串,其中包含大括號或逗號。格式化程式留下引用的字串的內部和 url() 值與寫入的值完全相同,因此字體路徑、SVG 資料 URI 或一段產生的內容文字永遠不會折疊、重新間隔或損壞。如果您經常將圖像嵌入為資料 URI,則 圖片到 base64 工具自然地與這個工具配對。
縮小 CSS 會使我的檔案縮小多少?
這完全取決於來源包含多少空白和多少註釋,但節省的費用是真實的。一旦空白消失,用大量縮排和文件註釋編寫的樣式表通常會縮小百分之二十到百分之四十。已經相當緊湊的文件會縮小更少。工具中的尺寸徽章會顯示檔案的前後位元組計數,因此您永遠不必猜測。
這些位元組很重要,因為 CSS 是渲染阻塞。瀏覽器在下載並解析文件頭中的 CSS 之前不會繪製頁面,因此每千位元組的樣式表在用戶第一次查看頁面之間都是千位元組。縮小是最便宜的效能勝利之一:沒有程式碼更改,沒有行為風險,線路上的位元組更少。除了縮小之外,伺服器層的 gzip 或 Brotli 壓縮進一步縮小了文件,並且縮小後的 CSS 壓縮得很好,因為刪除縮排會使有意義的令牌更加密集。
縮小是奉獻作品的近親 css 縮小器 確實如此,並且 css 縮小器指南 在壓縮方面走得更深。兩者存在的原因是方便:有時您落在格式化程式上清理檔案並想要在同一個地方對其進行縮小,有時您直接轉到縮小器。無論哪種方式,底層解析都是相同的。
我可以保留我的評論並控制縮排嗎?
兩者都是肯定的,這兩個選項涵蓋了一刀切格式化程式未命中的情況。美化時預設保留評論,因為當您閱讀和編輯 CSS 時,評論通常是最有用的部分。縮小時,預設會刪除評論以保存每個字節,但有一個切換來保留它們,當文件帶有必須保留在已傳送捆綁包中的許可標題或版權聲明時,您需要保留它們。
縮排是一種選擇,因為團隊不同意,格式化程式的目的是透過一致地應用一條規則來結束分歧。兩個空格是現代前端專案中最常見的預設空格,四個空格適合在其他地方使用它的程式碼庫,選項卡適合喜歡它們的可訪問性或個人配置的團隊。選擇一個並遵循輸出的每個區塊。一致性是整個值:格式化程式值得使用,因為它刪除了原本在專案中逐個檔案漂移的小手動決策。以這種方式標準化工具的更廣泛案例貫穿始終 開發人員生產力工具 指南。
格式化實際上解決了哪些日常問題?
我打開的 40,000 個字元的行是一個戲劇性的案例,但平凡的行出現的頻率要高得多。您從瀏覽器複製一條規則's 開發工具,它附帶計算出的速記和不一致的間距,與您的文件不匹配。您從從未運行過格式化程式的承包商那裡繼承了一個樣式表,因此每隔幾百行就移動一次大括號樣式和縮排。您貼上部落格文章或設計工具的片段,該工具使用選項卡,而您的專案使用空格。在每一個中,CSS 都可以工作,但它不匹配,而不匹配的文件是一個會減慢未來每次編輯速度並使每次差異變得混亂的文件。
透過格式化程式運行這樣的檔案可以立即標準化所有內容。每個區塊都會得到相同的縮進,每個聲明都會落在自己的行上,並且您隨後提交的差異僅顯示您實際所做的更改,而不是空白噪音的風暴。最後一點是安靜的生產力勝利:一致格式化的程式碼庫會產生乾淨的差異,而乾淨的差異會使程式碼審查更快,回歸更容易被發現。格式化不是表面性的。這就是樣式表隨著其增長而保持清晰的原因,這就是為什麼每個嚴肅的前端項目最終都會在一個佈局上標準化並執行它。 開發人員生產力工具 guide 為消除工作流程中的這種手動摩擦提供了更廣闊的案例。
格式化敏感或專有 CSS 是否安全?
是的,這是一個深思熟慮的設計決策,而不是一個腳註。所有解析和格式化都發生在瀏覽器內的 JavaScript 中。沒有樣式表上傳到伺服器,沒有任何內容被記錄,並且一旦頁面加載,工具就會繼續工作並關閉您的連接。您可以格式化包含內部類別名稱、未發布的設計系統令牌或未出貨功能結構的 CSS,而無需任何內容離開您的電腦。
這比看起來更重要,因為樣式表可能會洩漏意圖。類別名稱和自訂屬性名稱通常會傳達尚未公開的功能以及元件的結構' CSS 可以揭示產品的建構方式。伺服器端格式化程序,無論信譽如何,都是您將該資訊交給的第三方。客戶端工具完全消除了這個問題。在瀏覽器中而不是在伺服器上處理開發人員資料背後的原因是 資料隱私線上工具 指南,它適用於其中的每個工具 編碼工具 收藏,不只是這個。當隱私自由時,就沒有理由放棄它。
常見問題
如何在線格式化 CSS?
將 CSS 貼到輸入區域並按一下「美化」。該工具解析樣式表並重寫它,每行一個聲明和一致的縮排。所有內容都在您的瀏覽器中運行,因此不會上傳任何內容。
格式化和縮小 CSS 有什麼不同?
格式化,也稱為美化,添加了縮排和換行符,以便人們可以讀取 CSS,而縮小則刪除了所有不必要的空白和註釋,以便瀏覽器中的文件盡可能小。該工具從相同的輸入執行這兩種操作。
格式化 CSS 會改變我的樣式的工作方式嗎?
不。美化和縮小只會更改空白和註釋,而不會更改規則、選擇器或值。瀏覽器應用格式化樣式表的方式與應用原始樣式表完全相同。
它是否正確處理@media 和@keyframes?
是的。嵌套 at 規則(例如 @media、@supports 和 @keyframes)被解析為區塊,因此它們的內部規則在美化時縮進更深一級,並在縮小時保持完整。
它會破壞 url() 值或內容字串嗎?
不。格式化程式將引用的字串和 url () 值的內部保留為完全寫入的,因此資料 URI、字體路徑和內容文字永遠不會折疊或重新間隔。
縮小使我的 CSS 縮小多少?
這取決於文件包含多少空格和多少註釋,但一旦刪除縮排和註釋,可讀樣式表通常會縮小百分之二十到百分之四十。大小徽章顯示檔案的確切位元組變更。
縮小時我可以保留我的評論嗎?
是的。有一個切換來保留評論。將其關閉以獲得最小的輸出,或在需要在縮小的文件中保留許可證標題或創作註釋時將其開啟。
在這裡格式化敏感的 CSS 是否安全?
是的。所有解析和格式化都發生在瀏覽器內的 JavaScript 中。沒有樣式表發送到伺服器,沒有任何內容被記錄,並且該工具可以在停用連線的情況下運作。
的 css 格式化程式 是免費的,完全在瀏覽器中運行,無需註冊。美化樣式表以讀取它,縮小它以發貨,並且永遠不要再次調試 40,000 個字元的行。探索它和其餘部分 編碼工具 在 toolz。dev 上。
