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

核心要點(diǎn)：

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

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

開發(fā)者工具能幫助您查找和修復(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%。當(dāng)然，字節(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標(biāo)誌全局安裝CSSO，以便我們可以在命令行中使用它。 OS X和Linux用戶可能需要使用sudo（sudo npm install -g csso）。當(dāng)NPM將其安裝路徑打印到命令行窗口，並且命令行提示符重新出現(xiàn)時，您就知道它已安裝成功，如圖3.25所示。

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

使用CSSO壓縮

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

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

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

csso style.css style.min.css 默認(rèn)情況下，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），並將我們單獨(dú)的h1選擇器塊組合成一個?，F(xiàn)在，如果您懷疑CSSO將如何重寫您的CSS，您可以禁用其重構(gòu)功能。只需使用--restructure-off或-off標(biāo)誌即可。例如，運(yùn)行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文件無法達(dá)到最小大小。除非遇到問題，否則避免禁用重構(gòu)。第9章介紹的預(yù)處理器在其工具集中提供壓縮功能；但是，使用CSSO可以進(jìn)一步減少文件大小。

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

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

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

CSS Optimizer如何工作？

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

壓縮CSS有哪些風(fēng)險？

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

我可以手動壓縮CSS嗎？

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

如何使用CSS Optimizer？

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

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

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

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

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

CSS Optimizer是否免費(fèi)使用？

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

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

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

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

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

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