用CSS優化器縮小CSS

壓縮CSS：提升網站速度的利器

核心要點：

• CSS壓縮通過去除代碼冗餘字符來減小文件大小，從而加快下載速度並節省數據傳輸量。
• CSS Optimizer (CSSO) 是一款基於Node.js的壓縮工具，需要熟悉命令行界面。
• CSSO不僅去除不必要的空格、分號和註釋，還通過合併具有重複選擇器的聲明塊、刪除被覆蓋的屬性和縮短顏色代碼等方式進行優化。
• 雖然壓縮CSS可以提高網站性能，但也可能使代碼難以閱讀和調試。因此，建議保留原始未壓縮的CSS文件以備開發之用。

(以下內容摘自Tiffany Brown撰寫的《CSS大師》一書。該書在全球各地均有售，您也可以在此處購買電子書版本。)

開發者工具能幫助您查找和修復渲染問題，但效率如何呢？我們的文件大小是否已經最小化？為此，我們需要壓縮工具。

在CSS的上下文中，壓縮僅僅意味著去除多餘的字符。例如，考慮以下代碼塊：

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

這段代碼包括換行符和空格在內，長度為98字節。讓我們看看壓縮後的示例：

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

現在我們的CSS只有80字節長，減少了18%。當然，字節越少，下載速度就越快，您和您的用戶的數據傳輸量就越少。

在本節中，我們將介紹CSS Optimizer（CSSO），這是一個基於Node.js的壓縮工具。要安裝CSSO，您首先必須安裝Node.js和NPM。 NPM作為Node.js安裝過程的一部分安裝，因此您只需要安裝一個包。

使用CSSO需要您熟悉命令行界面。 Linux和OS X用戶可以使用終端應用程序（對於OS X，應用程序>終端應用程序）。如果您使用的是Windows，請使用命令提示符。轉到“開始”或Windows菜單，並在搜索框中鍵入cmd。

安裝CSSO

設置好Node.js和NPM後，您可以安裝CSSO。在命令行提示符下，鍵入：

npm install -g csso -g標誌全局安裝CSSO，以便我們可以在命令行中使用它。 OS X和Linux用戶可能需要使用sudo（sudo npm install -g csso）。當NPM將其安裝路徑打印到命令行窗口，並且命令行提示符重新出現時，您就知道它已安裝成功，如圖3.25所示。

圖3.25. 使用Windows命令提示符安裝CSSO

現在我們準備壓縮CSS了。

使用CSSO壓縮

要壓縮CSS文件，請運行csso命令，並將文件名作為參數傳遞：

csso style.css 這將執行基本壓縮。 CSSO會去除不必要的空格、多餘的分號以及CSS輸入文件中的註釋。

完成後，CSSO會將優化的CSS打印到標準輸出，即當前的終端或命令提示符窗口。但是，在大多數情況下，我們希望將該輸出保存到文件中。為此，將第二個參數傳遞給csso，即壓縮文件的名稱。例如，如果我們想將style.css的壓縮版本保存為style.min.css，我們將使用以下命令：

csso style.css style.min.css 默認情況下，CSSO會重新排列CSS的部分內容。例如，它會合併具有重複選擇器的聲明塊，並刪除一些被覆蓋的屬性。考慮以下CSS：

body { margin: 20px 30px; padding: 100px; margin-left: 0px; }

h1 { font: 200 36px / 1.5 sans-serif; }

h1 { color: #ff6600; }

在此代碼段中，margin-left覆蓋了之前的margin聲明。我們還重複使用了h1作為連續聲明塊的選擇器。優化和壓縮後，我們得到：

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

CSSO刪除了多餘的空格、換行符和分號，並將#ff6600縮短為#f60。 CSSO還將margin和margin-left屬性合併到一個聲明中（margin: 20px 30px 20px 0），並將我們單獨的h1選擇器塊組合成一個。現在，如果您懷疑CSSO將如何重寫您的CSS，您可以禁用其重構功能。只需使用--restructure-off或-off標誌即可。例如，運行csso style.css style.min.css -off將得到以下結果：

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

現在我們的CSS已壓縮，但未優化。禁用重構將使您的CSS文件無法達到最小大小。除非遇到問題，否則避免禁用重構。第9章介紹的預處理器在其工具集中提供壓縮功能；但是，使用CSSO可以進一步減少文件大小。

關於使用CSS Optimizer壓縮CSS的常見問題

壓縮CSS在Web開發中的重要性是什麼？

壓縮CSS是Web開發的一個重要方面，因為它有助於減小CSS文件的大小。文件大小的減小會導致網站加載速度更快，從而提供更好的用戶體驗。壓縮後的CSS文件去除了不必要的字符，例如空格、換行符和註釋，這些字符不會影響代碼的功能。此過程可以顯著提高網站的性能，尤其對於互聯網連接較慢的用戶而言。

CSS Optimizer如何工作？

CSS Optimizer通過分析您的CSS代碼並去除不必要的字符和冗餘來工作。它通過消除空格、換行符和註釋以及簡化代碼結構來壓縮CSS文件。這將導致文件大小更小，Web瀏覽器可以更快地下載，從而提高網站的整體性能。

壓縮CSS有哪些風險？

雖然壓縮CSS可以顯著提高網站的性能，但需要注意的是，它也可能使代碼更難閱讀和調試。這是因為該過程去除了使代碼易於閱讀的所有格式和註釋。因此，建議保留原始未壓縮的CSS文件以用於調試和開發。

我可以手動壓縮CSS嗎？

是的，您可以通過刪除所有不必要的字符和簡化代碼來手動壓縮CSS。但是，這個過程可能非常耗時且容易出錯，特別是對於較大的CSS文件而言。使用CSS Optimizer之類的工具可以自動化此過程，確保您的CSS能夠準確有效地壓縮。

如何使用CSS Optimizer？

要使用CSS Optimizer，您只需將CSS代碼粘貼到CSS Optimizer網站上的輸入字段中，然後單擊“優化”按鈕即可。然後，該工具將分析您的代碼，並為您提供一個您可以復制並在網站中使用的壓縮版本。

壓縮CSS會影響我的網站的功能嗎？

不會，壓縮CSS不會影響您的網站的功能。該過程僅去除不必要的字符並簡化代碼，但不會更改瀏覽器解釋CSS規則的方式。因此，您的網站的外觀和功能將保持不變，但由於文件大小較小，加載速度會更快。

我可以將CSS Optimizer用於大型CSS文件嗎？

是的，CSS Optimizer可以處理大型CSS文件。但是，文件越大，工具分析和壓縮代碼所需的時間就越長。儘管如此，對於大型CSS文件，使用CSS Optimizer仍然比嘗試手動壓縮代碼更高效、更準確。

CSS Optimizer是否免費使用？

是的，CSS Optimizer是一個免費工具，您可以使用它來壓縮CSS代碼。它是一個基於Web的工具，因此您無需下載或安裝任何內容即可使用它。您只需訪問CSS Optimizer網站，粘貼您的CSS代碼，即可獲得壓縮版本。

如果需要更改CSS，我可以反轉此過程嗎？

是的，您可以使用原始未壓縮的CSS文件來反轉此過程。這就是建議在壓縮CSS之前保留原始CSS文件副本的原因。如果您需要更改或調試代碼，可以使用原始文件，然後在完成後再次壓縮它。

我可以將哪些其他實踐與CSS壓縮相結合以提高網站的性能？

除了壓縮CSS之外，您還可以壓縮HTML和JavaScript文件。這可以進一步減少網站的加載時間。其他實踐包括優化圖像、使用內容分發網絡 (CDN)、啟用壓縮和實現瀏覽器緩存。這些實踐與CSS壓縮相結合，可以顯著提高網站的性能和用戶體驗。

以上是用CSS優化器縮小CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！