這是我希望您預(yù)先知道的：這是一個(gè)難題。如果您降落在這裡，因?yàn)槟Ｍ赶蛞粋€(gè)可以運(yùn)行的工具，可以告訴您可以從項(xiàng)目中刪除哪些CSS，那麼……那裡有工具，但是我警告您對(duì)它們非常小心，因?yàn)闆]有一個(gè)可以告訴您完整的故事。

我知道你想要什麼。您想運(yùn)行該工具，刪除它告訴您的內(nèi)容，並且在2.2分鐘內(nèi)擁有更快的網(wǎng)站。對(duì)不起，但是我會(huì)讓你失望的。

我認(rèn)為，對(duì)於任何這樣的工具，您都應(yīng)該對(duì)健康的懷疑。他們都沒有完全對(duì)您撒謊- 他們通常沒有足夠的信息來為您提供安全可行的結(jié)果。這並不是說您不能使用它們，也不能完成。讓我們散步。

動(dòng)機(jī)

我認(rèn)為願(yuàn)意刪除未使用的CSS的＃1驅(qū)動(dòng)程序是：

您使用了CSS框架（例如Bootstrap），其中包括該框架的整個(gè)CSS文件，並且僅使用了少數(shù)圖案。

我可以同情。 CSS框架通常不會(huì)提供簡(jiǎn)單的方法來選擇僅使用您使用的內(nèi)容，並且自定義來源以這種方式可能需要您團(tuán)隊(duì)沒有的專業(yè)知識(shí)。這甚至可能是您開始使用框架的原因。

假設(shè)您正在加載100 kb的CSS。我會(huì)說很多。 （正如我所寫的那樣，這個(gè)網(wǎng)站的頁面約為23 kb，並且有很多頁面和模板。我沒有做任何特別的事情來降低尺寸。）您有懷疑或一些證據(jù)，表明您不使用這些字節(jié)的一部分。我可以看到引起警報(bào)的原因。如果您有100 kb的JPG，可以通過將其滴入某種工具來將其壓縮到20 kb，那真是太棒了，非常值得。但是，對(duì)於CSS，這樣做的收益更為重要，因?yàn)镃SS已加載到頭部並構(gòu)成阻塞。 JPG不是。

？看“覆蓋”

Chrome的DevTools具有“覆蓋範(fàn)圍”選項(xiàng)卡，它將告訴您使用了多少CSS和JavaScript。例如，如果我立即訪問CSS-Tricks的主頁……

它告訴我，我的style.css文件的70.7％未使用。我認(rèn)為這是對(duì)的，其餘的CSS也用於其他地方。我不只是將一個(gè)大型庫將其轉(zhuǎn)移到這個(gè)網(wǎng)站上。我手工寫了每一行，所以我懷疑其中超過2/3在全球範(fàn)圍內(nèi)沒有使用。

我以為我可以開始“錄製”，然後單擊網(wǎng)站的不同區(qū)域，並觀察未使用的數(shù)字下降，因?yàn)殇秩揪哂胁煌琀TML的不同頁面，但是las，當(dāng)頁面刷新時(shí)，覆蓋範(fàn)圍選項(xiàng)卡也是如此。除非您猜有一個(gè)單一頁應(yīng)用程序，否則在多頁上查看CSS覆蓋範(fàn)圍並不是很有用嗎？

我討厭這麼說，但我發(fā)現(xiàn)看代碼覆蓋範(fàn)圍非常毫無用處。對(duì)我來說，它描繪了網(wǎng)站上所有這些未使用的代碼的可怕圖片，這是我的疑問，但我所能做的就是擔(dān)心。

這可能是您的想法，即首先需要發(fā)現(xiàn)和刪除未使用的CSS。

我的主要關(guān)心

我最大的擔(dān)心是您查看諸如代碼覆蓋範(fàn)圍之類的東西，並查看未使用的行：

然後你去，完美！我將刪除該CSS！而且您這樣做是為了發(fā)現(xiàn)它根本沒有使用，並且在整個(gè)網(wǎng)站上引起了大型樣式問題。這是事實(shí)：您實(shí)際上不知道CSS選擇器是否未使用，除非您：

1. 檢查整個(gè)網(wǎng)站的每個(gè)頁面上的覆蓋範(fàn)圍…
2. 執(zhí)行所有JavaScript…
3. 在國家的每一個(gè)可能的組合下……
4. 在您使用的媒體查詢的每種可能組合中。

檢查主頁不算在內(nèi)。檢查所有頂級(jí)頁面都不計(jì)算。您必須瀏覽每個(gè)頁面，包括並非總是最佼佼者的狀態(tài)，更不用說所有邊緣場(chǎng)景了。否則，您可能最終會(huì)刪除彈出式模式中信用卡選擇下拉式下拉樣式，該彈出式模式下顯示了在寬限期內(nèi)登錄的殘疾帳戶的用戶，該帳戶也有一個(gè)可以應(yīng)用的禮品卡。

對(duì)於自動(dòng)化工具來說，這太複雜了，無法確保其方法完美地工作，尤其是在瀏覽器上下文（不同的屏幕尺寸，不同的功能，不同的瀏覽器）和第三方的未知數(shù)中。

這是我關(guān)注的一個(gè)例子：

Purifycss Online採用一些URL，並立即提供可使用的CSS副本

這是我將我的CSS-Tricks.com放到在線淨(jìng)化並獲得新的CSS。

哦！

它使我有機(jī)會(huì)放入其他URL（很好），但是CSS-tricks上有成千上萬的URL。他們中的許多人相當(dāng)相似，但是所有人都有使用選擇器的潛力。我得到的印像沒有執(zhí)行JavaScript，因?yàn)橥ㄟ^JavaScript進(jìn)入頁面上的任何內(nèi)容都沒有風(fēng)格。它甚至刪除了我的：懸停的國家。

也許您會(huì)明白為什麼我對(duì)這些工具的信任如此之低。

構(gòu)建過程的一部分

PurifyCSS可能更常用地用作構(gòu)建過程工具，而不是在線界面。他們的文檔有有關(guān)Grunt，Gulp和Webpack的說明。例如，射擊文件以檢查和處理它們：

 var content = ['**/src/js/*。 js'，'**/src/html/*。 html'];
var css = ['**/src/css/*。 css'];

var選項(xiàng)= {
  //將將純化的CSS寫入此文件。
  輸出：'./dist/purified.css'
};

純化（內(nèi)容，CSS，選項(xiàng)）；

這為您提供了更多的準(zhǔn)確機(jī)會(huì)。該內(nèi)容BLOB可能是構(gòu)建您網(wǎng)站的每個(gè)模板，部分和JavaScript文件的列表。這可能會(huì)很痛苦，但是您肯定會(huì)變得更準(zhǔn)確。它沒有說明數(shù)據(jù)存儲(chǔ)中的內(nèi)容（例如，居住在數(shù)據(jù)庫中的博客文章）和第三方JavaScript，但也許這對(duì)您來說並不重要，或者您可以以其他方式考慮它。

Purgecss是Purifycss的競(jìng)爭(zhēng)對(duì)手，警告其比較技術(shù)：

PurifyCSS可以與任何文件類型一起使用，而不僅僅是HTML或JavaScript。 PurifyCSS可以通過查看文件中的所有單詞並將其與CSS中的選擇器進(jìn)行比較。每個(gè)單詞都被視為選擇器，這意味著可以錯(cuò)誤地考慮許多選擇器。例如，您可能碰巧在段落中有一個(gè)與CSS中選擇器相匹配的單詞。

因此，請(qǐng)記住這一點(diǎn)。它可以比較潛在的選擇器匹配的方式愚蠢，這既聰明又危險(xiǎn)。

UNUSEDCSS是一項(xiàng)在線服務(wù)，可為您爬網(wǎng)

手動(dòng)配置工具以從各個(gè)角度查看網(wǎng)站上的每個(gè)頁面無疑是一件瑣事，並且隨著代碼庫的發(fā)展，需要將其保持在日常的同步中。有趣的是，在線服務(wù)未使用CSSS試圖通過基於單個(gè)URL爬行網(wǎng)站本身來克服這一負(fù)擔(dān)。

我註冊(cè)了付費(fèi)服務(wù)，並將其指向CSS-Tricks。我承認(rèn)，一眼就瞥見結(jié)果，對(duì)我來說感覺要準(zhǔn)確得多：

它還使您可以下載清潔的文件並提供大量的自定義，例如檢查/取消選中的選擇器實(shí)際上/不想要（例如，您看到了一個(gè)不需要的類名稱，但您確定您確實(shí)需要它），以及在刪除和刪除重複的選擇器。

我喜歡在線爬網(wǎng)服務(wù)的越來越高的準(zhǔn)確性，但是有很多噪音，而且我也看不到我如何將其納入日常的構(gòu)建和發(fā)行過程中。

工具通常用於後處理

假設(shè)您的CSS是用較少或SASS構(gòu)建的，然後使用後處理器將其編譯為CSS。您可能會(huì)在其他CSS預(yù)處理的結(jié)尾結(jié)合自動(dòng)未使用的CSS清潔。喜歡…

1. Sass
2. PostCSS / AUTOPREFIXER
3. [乾淨(jìng)未使用的CSS]
4. 生產(chǎn)CSS

這兩者都是有道理的，對(duì)我來說有點(diǎn)有趣。您實(shí)際上並未修復(fù)生成未使用的CSS的樣式。相反，您只需在構(gòu)建末端擦拭即可。我想JavaScript一直在用樹木搖晃做這種事情，因此有一個(gè)先例，但對(duì)我來說仍然很奇怪，因?yàn)镃SS代碼庫是如此直接動(dòng)手。這種設(shè)置幾乎鼓勵(lì)您將CSS丟棄到任何地方，因?yàn)檫^度的罰款沒有罰款。它消除了了解如何應(yīng)用和使用CSS的任何動(dòng)力。

Purgecss是另一種採用明確輸入並為您提供結(jié)果的工具

Purgecss是未使用的CSS市場(chǎng)中的另一個(gè)玩家。我喜歡的一件切線是，它清楚地解釋了它與其他工具的不同。例如，與purifycss相比：

Purifycss最大的缺陷是它缺乏模塊化。但是，這也是其最大的好處。 PurifyCSS可以與任何文件類型一起使用，而不僅僅是HTML或JavaScript。 PurifyCSS可以通過查看文件中的所有單詞並將其與CSS中的選擇器進(jìn)行比較。每個(gè)單詞都被視為選擇器，這意味著可以錯(cuò)誤地考慮許多選擇器。例如，您可能碰巧在段落中有一個(gè)與CSS中選擇器相匹配的單詞。

Purgecss通過提供創(chuàng)建提取器的可能性來解決此問題。提取器是獲取文件內(nèi)容並提取其中使用的CSS選擇器列表的函數(shù)。它允許完美刪除未使用的CSS。

目前，Purgecss似乎是大狗。許多人正在使用它並寫它。

• Nghia Pham寫了有關(guān)如何專門使用Bootstrap的文章
• 格雷格·科恩（Greg Kohn）發(fā)表了一篇警告，稱它不會(huì)在白名單中刪除異常情況下的選擇者。
• Flavio Copes寫了有關(guān)使用NPM腳本和PostCSS運(yùn)行它的文章。
• Sarah Dayan仔細(xì)詳細(xì)介紹瞭如何與尾風(fēng)一起工作。

儘管Purgecss需要特殊的配置才能與Tailwind一起使用，但似乎尾風(fēng)和珀奇斯在豆莢中是兩個(gè)豌豆。實(shí)際上，他們的文檔建議將它們一起使用，並為在構(gòu)建過程中使用它提供了CLI。

我相信要點(diǎn)是這樣的：tailwind產(chǎn)生了充滿實(shí)用程序選擇器的大型CSS文件。但是他們不打算讓您使用整個(gè)事情。您可以在HTML中使用這些實(shí)用程序選擇器來執(zhí)行所有樣式，然後使用Purgecss查看所有HTML，然後搖動(dòng)生產(chǎn)CSS中未使用的實(shí)用程序選擇器。

儘管如此，在您的網(wǎng)站上的每個(gè)模板（JavaScript，HTML或其他方式）上教授它將是一個(gè)持續(xù)的維護(hù)問題，同時(shí)手動(dòng)配置任何依賴第三方資源的內(nèi)容，並且知道可能在構(gòu)建過程中無法查看來自數(shù)據(jù)存儲(chǔ)的任何數(shù)據(jù)，從而使其可以手動(dòng)考慮。

我最喜歡的技術(shù)：讓一個(gè)真正熟悉您的CSS代碼庫的人注意問題並旨在隨著時(shí)間的推移解決

也許這感覺就像是一個(gè)老朋友的方法，他需要與時(shí)代在一起，但是，這感覺就像我最實(shí)用的方法。由於這個(gè)問題非常困難，我認(rèn)為努力工作是答案。這是一段時(shí)間以來了解問題並努力解決解決方案。與您的前端密切相關(guān)的前端開發(fā)人員將對(duì)CSS-Land的使用情況有所了解，並且可以將其降低。

我看到的一種極端的測(cè)試方法是使用A（IE背景圖像：URL（/IS-this-being-used.gif？selector）;）在CSS塊中，然後隨著時(shí)間的推移檢查服務(wù)器日誌以查看是否已訪問了該圖像。如果訪問它，則使用；如果沒有，那不是。

但是也許我在潛在工具箱中最喜歡的工具是：

視覺回歸測(cè)試

您可以盡可能多的網(wǎng)站屏幕截圖 - 與所有最重要的頁面以及操縱到不同狀態(tài)的所有頁面一樣 - 以及在不同的瀏覽器和屏幕尺寸上。這些屏幕截圖是從Git上的主分支創(chuàng)建的。

然後，在將任何分支合併到主人中之前，您可以將所有這些屏幕截圖都進(jìn)行，並將其比較到主機(jī)中的屏幕截圖。不是手動(dòng)，而是通過編程方式。

這正是珀西所做的，所以請(qǐng)注意：

多年來，視覺回歸測(cè)試工具上還有其他刺傷，但珀西是我唯一看到的對(duì)我來說很有意義的一種。我不僅需要屏幕截圖；我希望它們比較，以便我可以看到它們之間的視覺差異。我不僅想看到差異；我想批準(zhǔn)或不贊成他們。我還希望該批準(zhǔn)可以阻止或允許合併，並且我希望能夠在拍攝屏幕截圖之前控制瀏覽器。我不想手動(dòng)更新比較圖像。這就是珀西的所有麵包。

全面披露：珀西之前曾在此處贊助CSS-Tricks上的事情（包括上面的視頻），但沒有這篇文章。

與原子CSS和CSS-IN-JS的關(guān)係

我敢肯定，有很多人閱讀本文：我沒有未使用的CSS，因?yàn)槲沂褂玫墓ぞ邥?huì)生成所需的確切CSS，僅此而已。

嘿，有點(diǎn)酷。

也許那是霧化器。也許這是您也經(jīng)過UNCS的Tachyons，您對(duì)此非常謹(jǐn)慎。也許現(xiàn)在是par purgecss組合，現(xiàn)在風(fēng)靡一時(shí)。

也許您以其他方式處理樣式。如果您緊密耦合JavaScript組件和樣式，例如React和Encotion，甚至僅將CSS模塊與Whine一起使用，那麼較少未使用的CSS就是CSS-IN-JS的優(yōu)勢(shì)。而且，由於在許多基於JavaScript的構(gòu)建過程中，搖晃樹木和代碼拆分出現(xiàn)在乘車之旅，因此您不僅具有更少的CSS，而且只加載了目前所需的內(nèi)容。不過，這一切都有權(quán)衡。

您如何避免未來的項(xiàng)目中未使用的CSS？

我認(rèn)為造型的未來是全球和組件樣式之間有意分開的。大多數(shù)樣式都範(fàn)圍為組件，但是有一些全球樣式選擇可以清楚地利用級(jí)聯(lián)的優(yōu)勢(shì)（例如全球排版默認(rèn)值）。

如果將大多數(shù)樣式範(fàn)圍放在組件上，我認(rèn)為未使用的樣式的建立機(jī)會(huì)較小，因?yàn)閷⒛念^腦纏繞在一小塊HTML和一小部分CSS周圍，而彼此之間直接相關(guān)的CSS會(huì)更容易。當(dāng)組件死亡或進(jìn)化時(shí)，樣式會(huì)隨之而來。 CSS捆綁包由實(shí)際使用的組件製成。

CSS-IN-JS解決方案自然會(huì)朝這個(gè)方向前進(jìn)，因?yàn)闃邮脚c組成部分綁定在一起。確實(shí)，這是重點(diǎn)。但這不是必需的。我喜歡CSS模塊的通用方法，這幾乎完全用於樣式範(fàn)圍，並且不要求您使用某些特定的JavaScript框架。

如果所有這些似乎是理論上的或透視外的，並且您只需一個(gè)引導(dǎo)網(wǎng)站，您就可以在其中嘗試減少所有引導(dǎo)CSS的大小，我建議您首先使用來自源的bootstrap而不是最終的默認(rèn)分佈式捆綁包。來源是SCSS，並從一堆高級(jí)構(gòu)建中構(gòu)建，因此，如果您不需要引導(dǎo)程序的特定部分，則可以將其刪除。

好運(yùn)，幫派。

以上是您如何從網(wǎng)站上刪除未使用的CSS？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！