壓縮CSS：提升網(wǎng)站速度的利器

核心要點：

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

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

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

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

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

這段代碼包括換行符和空格在內(nèi)，長度為98字節(jié)。讓我們看看壓縮后的示例：

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

現(xiàn)在我們的CSS只有80字節(jié)長，減少了18%。當然，字節(jié)越少，下載速度就越快，您和您的用戶的數(shù)據(jù)傳輸量就越少。

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

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

安裝CSSO

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

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

現(xiàn)在我們準備壓縮CSS了。

使用CSSO壓縮

要壓縮CSS文件，請運行csso命令，并將文件名作為參數(shù)傳遞：

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

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

csso style.css style.min.css 默認情況下，CSSO會重新排列CSS的部分內(nèi)容。例如，它會合并具有重復選擇器的聲明塊，并刪除一些被覆蓋的屬性?？紤]以下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作為連續(xù)聲明塊的選擇器。優(yōu)化和壓縮后，我們得到：

<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選擇器塊組合成一個。現(xiàn)在，如果您懷疑CSSO將如何重寫您的CSS，您可以禁用其重構(gòu)功能。只需使用--restructure-off或-off標志即可。例如，運行csso style.css style.min.css -off將得到以下結(jié)果：

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

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

關(guān)于使用CSS Optimizer壓縮CSS的常見問題

壓縮CSS在Web開發(fā)中的重要性是什么？

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

CSS Optimizer如何工作？

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

壓縮CSS有哪些風險？

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

我可以手動壓縮CSS嗎？

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

如何使用CSS Optimizer？

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

壓縮CSS會影響我的網(wǎng)站的功能嗎？

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

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

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

CSS Optimizer是否免費使用？

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

如果需要更改CSS，我可以反轉(zhuǎn)此過程嗎？

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

我可以將哪些其他實踐與CSS壓縮相結(jié)合以提高網(wǎng)站的性能？

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

以上是用CSS優(yōu)化器縮小CSS的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！