使用CSS我不是書籤

Stoyan說得完全正確。儘管我們都熱愛CSS，但它仍然是網站加載速度的重要因素，減少CSS用量是一件好事。他創建了一個名為“CSS Me Not”的便捷書籤，用於診斷不必要的CSS文件，我們稍後會詳細介紹。

問題在於CSS位於關鍵路徑上，它會阻塞渲染，甚至經常阻塞JavaScript執行。我們熱愛CSS，它很神奇，它可以完成令人難以置信的壯舉，修復損壞的UI，操縱圖像並繪製令人驚嘆的圖片。我們熱愛CSS。我們只是想要……更少的CSS，因為它的本質是阻塞性的。

有時我們的網站會使用完全不必要的整個樣式表。我不得不承認，WordPress在這方面臭名昭著，它會加載你可能根本沒有使用的插件和區塊的樣式表。在我寫這篇文章的時候，我正處於這種境地。我只是還沒找到時間將一些不需要加載的小樣式表清除掉。

Stoyan創建了一個名為“CSS Me Not”的快速書籤來查看所有這些CSS文件。當然，最大的好處是它讓你知道你面臨的是什麼。

你也可以在DevTools中找到這些樣式表，但是“CSS Me Not”書籤使它更容易，並且還有一個殺手級的額外功能：關閉這些樣式表。在我的CSS-Tricks網站上測試這個書籤，我可以看到WordPress加載了四個樣式表（由於設置和插件），我知道我並不需要它們。

如果你想在DevTools中執行此操作，你可以按CSS過濾你的網絡請求，找到要關閉的樣式表，右鍵單擊並阻止它，然後重新加載。

多年來我一直都在努力解決這個問題，在WordPress中取消我不想要的腳本和样式的隊列。

刪除完全未使用的樣式表是一個明顯的勝利，但還有一個更棘手的問題，即刪除未使用的CSS。在那篇文章中，我提到了真正了解任何特定CSS是否未使用的唯一方法，那就是為每個選擇器附加一個背景圖像，然後在一段時間的生產時間後檢查服務器日誌，以查看哪些圖像從未被請求過。 Stoyan在這裡證實了我的說法：

UnCSS有點像“實驗室”。 “現實世界”可能會讓你大吃一驚。因此，我們在SomeCompany Inc.做了一個技巧，就是在構建時為所有CSS聲明添加工具，其中每個選擇器都獲得一個1×1的透明背景圖像。然後在一周左右後仔細檢查服務器日誌，看看實際使用了什麼。

以上是使用CSS我不是書籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！