您如何從網站上刪除未使用的CSS？

這是我希望您預先知道的：這是一個難題。如果您降落在這裡，因為您希望指向一個可以運行的工具，可以告訴您可以從項目中刪除哪些CSS，那麼……那裡有工具，但是我警告您對它們非常小心，因為沒有一個可以告訴您完整的故事。

我知道你想要什麼。您想運行該工具，刪除它告訴您的內容，並且在2.2分鐘內擁有更快的網站。對不起，但是我會讓你失望的。

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

動機

我認為願意刪除未使用的CSS的＃1驅動程序是：

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

我可以同情。 CSS框架通常不會提供簡單的方法來選擇僅使用您使用的內容，並且自定義來源以這種方式可能需要您團隊沒有的專業知識。這甚至可能是您開始使用框架的原因。

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

？看“覆蓋”

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

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

我以為我可以開始“錄製”，然後單擊網站的不同區域，並觀察未使用的數字下降，因為渲染具有不同HTML的不同頁面，但是las，當頁面刷新時，覆蓋範圍選項卡也是如此。除非您猜有一個單一頁應用程序，否則在多頁上查看CSS覆蓋範圍並不是很有用嗎？

我討厭這麼說，但我發現看代碼覆蓋範圍非常毫無用處。對我來說，它描繪了網站上所有這些未使用的代碼的可怕圖片，這是我的疑問，但我所能做的就是擔心。

這可能是您的想法，即首先需要發現和刪除未使用的CSS。

我的主要關心

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

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

1. 檢查整個網站的每個頁面上的覆蓋範圍…
2. 執行所有JavaScript…
3. 在國家的每一個可能的組合下……
4. 在您使用的媒體查詢的每種可能組合中。

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

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

這是我關注的一個例子：

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

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

哦！

它使我有機會放入其他URL（很好），但是CSS-tricks上有成千上萬的URL。他們中的許多人相當相似，但是所有人都有使用選擇器的潛力。我得到的印像沒有執行JavaScript，因為通過JavaScript進入頁面上的任何內容都沒有風格。它甚至刪除了我的：懸停的國家。

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

構建過程的一部分

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

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

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

純化（內容，CSS，選項）；

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

Purgecss是Purifycss的競爭對手，警告其比較技術：

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

因此，請記住這一點。它可以比較潛在的選擇器匹配的方式愚蠢，這既聰明又危險。

UNUSEDCSS是一項在線服務，可為您爬網

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

我註冊了付費服務，並將其指向CSS-Tricks。我承認，一眼就瞥見結果，對我來說感覺要準確得多：

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

我喜歡在線爬網服務的越來越高的準確性，但是有很多噪音，而且我也看不到我如何將其納入日常的構建和發行過程中。

工具通常用於後處理

假設您的CSS是用較少或SASS構建的，然後使用後處理器將其編譯為CSS。您可能會在其他CSS預處理的結尾結合自動未使用的CSS清潔。喜歡…

1. Sass
2. PostCSS / AUTOPREFIXER
3. [乾淨未使用的CSS]
4. 生產CSS

這兩者都是有道理的，對我來說有點有趣。您實際上並未修復生成未使用的CSS的樣式。相反，您只需在構建末端擦拭即可。我想JavaScript一直在用樹木搖晃做這種事情，因此有一個先例，但對我來說仍然很奇怪，因為CSS代碼庫是如此直接動手。這種設置幾乎鼓勵您將CSS丟棄到任何地方，因為過度的罰款沒有罰款。它消除了了解如何應用和使用CSS的任何動力。

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

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

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

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

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

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

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

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

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

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

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

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

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

視覺回歸測試

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

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

這正是珀西所做的，所以請注意：

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

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

與原子CSS和CSS-IN-JS的關係

我敢肯定，有很多人閱讀本文：我沒有未使用的CSS，因為我使用的工具會生成所需的確切CSS，僅此而已。

嘿，有點酷。

也許那是霧化器。也許這是您也經過UNCS的Tachyons，您對此非常謹慎。也許現在是par purgecss組合，現在風靡一時。

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

您如何避免未來的項目中未使用的CSS？

我認為造型的未來是全球和組件樣式之間有意分開的。大多數樣式都範圍為組件，但是有一些全球樣式選擇可以清楚地利用級聯的優勢（例如全球排版默認值）。

如果將大多數樣式範圍放在組件上，我認為未使用的樣式的建立機會較小，因為將您的頭腦纏繞在一小塊HTML和一小部分CSS周圍，而彼此之間直接相關的CSS會更容易。當組件死亡或進化時，樣式會隨之而來。 CSS捆綁包由實際使用的組件製成。

CSS-IN-JS解決方案自然會朝這個方向前進，因為樣式與組成部分綁定在一起。確實，這是重點。但這不是必需的。我喜歡CSS模塊的通用方法，這幾乎完全用於樣式範圍，並且不要求您使用某些特定的JavaScript框架。

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

好運，幫派。

以上是您如何從網站上刪除未使用的CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！