在您的項目中避免“浪費”的 CSS

似乎網頁設計師一直在努力優化他們的創作。 在短期內，這有利於性能。 從長遠來看，它還可以簡化維護。

通常，這意味著優化圖像、實現頁面緩存和通過內容交付網絡 (CDN) 提供文件。 這些都是有效的措施。 但沒有得到足夠重視的一項是網站 CSS 中的潛在膨脹。

雖然您可能會縮小樣式表或通過 CDN 提供它們，但還可以做更多事情。 具體來說，擺脫沒有使用的浪費標記並收緊仍然相關的樣式。

這最好從構建過程的一開始就完成。 但也可以減輕現有網站的負載。 讓我們來看看所涉及的挑戰，以及一些可以使網站更快的工具和技術。

處理內置於主題和框架中的膨脹

過去，網站基本上是從頭開始構建的。 這是一個很好的方法，因為設計師可以只包含需要的樣式和腳本。 如果小心完成，這個過程可能會產生一個經過微調的網站。

當然，我們許多人放棄這種做法的原因有很多。 就時間和預算限製而言，它根本就沒有效率。

現代網站通常建立在預建產品之上。 這可能是一個 CSS 框架，例如 Bootstrap 或一個精心設計的 WordPress 主題。 在某些情況下，CMS 主題甚至可能包含一個框架。

這些產品旨在一刀切。 通過包含您可能需要的所有內容，它使開髮變得更快。 不幸的是，不能說它們對性能的影響也是如此。

那麼，可以做些什麼來改善這種情況呢？

盡可能使用基於組件或輕量級的框架

從理論上講，可以在避免臃腫的同時獲得框架的優勢。 這可以通過使用基於組件的包來實現，這些包使您能夠加載特定功能而忽略其他功能。 前面提到的 Bootstrap 確實允許這種類型的定制——在一定程度上。

另一種選擇是 Tailwind CSS，它提供基本樣式並假設您將在它們之上構建。 如果您正在尋找一個很好的起點，而不是一個更完整的產品，這可能是一個合適的選擇。

使用框架沒有錯。 但是尋找一個：a）讓您選擇要加載的組件，或者； b) 提供可以輕鬆定制的準系統樣式表。 無論哪種方式，您的項目都將從減少的負載中受益。

如何處理 CMS 主題？

諸如商業 WordPress 主題之類的產品可能會很棘手，因為它們通常包含大量樣式——無論您是否需要它們。

一個特定的主題可能會被組織得井井有條，以至於很容易讓你不想要的樣式表出隊。 甚至可能有一個主題選項面板，您只需單擊幾下即可完成此操作。 然而，這更有可能是例外而不是規則。

避免臃腫主題的最佳方法是創建自己的主題。 例如，WordPress 入門主題將提供一些您可以自定義的準系統 CSS。 這有助於確保更精簡的樣式表，並至少減少與 CMS 相關的一小部分開銷。

整理現有樣式表

將我們的焦點轉移到現有網站，整理和重構 CSS 可以通過以下兩種方式之一完成：

手動查看樣式

啟動您最喜歡的代碼編輯器並打開您網站的樣式表始終是一個不錯的起點。 是的，這可能是一種乏味的體驗。 但這也是照顧低垂果實的有效方法。

沒有必要仔細檢查 CSS 的每一行。 相反，這個想法是找到任何你知道沒有被使用或沒有盡可能高效的項目。

例如，假設您運行一個 WordPress 網站，該網站具有一些自定義樣式來覆蓋插件的樣式。 如果您不再使用該特定插件怎麼辦？ 在這種情況下，可以輕鬆刪除樣式。

或者，也許有一些你只是偶爾使用的款式——比如在寒假期間。 將這些樣式移動到單獨的文件中並僅在需要時調用它們可能是值得的。

還有一些 CSS 選擇器寫得不是很好。 也許他們有許多不再需要的瀏覽器前綴或不必要的重複屬性。 這是一個適合清理的區域。

如果您的網站設計已有幾年曆史，您可能會驚訝於您能找到多少多餘的樣式。

使用自動化工具

有許多工具可以掃描您的網站（或至少是其中的一部分）並報告未使用的 CSS 列表。 但是，在等待完美時不要屏住呼吸。

就像自動輔助工具一樣，未使用的 CSS 掃描器只能為您提供這麼多信息。 因此，最好對結果持保留態度並將其用作指導——而不是對您的問題的最終答案。

CSS-Tricks 的 Chris Coyier 寫了一篇關於這個特殊問題的優秀文章，值得一看。 他不僅測試了其中一些工具，還研究了手頭的更大問題，例如媒體查詢。

但是，如果您有興趣嘗試這些工具中的一種或多種，一些更受歡迎的選擇是：

• 吉比特
• 清除CSS
• 淨化CSS
• 未使用的 CSS

自動化工具和人工審核相結合可能是最好的做法。 兩者都可以讓您更全面地了解潛在的性能優化。 您可能無法抓住每一個項目，但仍有機會產生可衡量的影響。 您可以使用 GTmetrix 等工具在測試前後進行一些操作以查看結果。

談到 CSS：不浪費，不想要

樣式表的大小令人驚訝——尤其是在使用現成的 CSS 框架時。 當然，很高興作者在樣式元素方面為您做了很多艱苦的工作。 同時，它在頁面渲染和加載時間方面留下了很多問題。

這是從項目一開始就值得關注的事情。 通過尋求減輕樣式表的重量，您正在幫助從您的網站中擠出最後一滴優化。

如果您的網站已經向全世界展示，您仍然可以採取積極的措施。 查看 CSS 並查找要簡化或刪除的項目。 利用現有的眾多自動化工具之一來查找您可能錯過的項目。

最重要的是，將 CSS 精簡到基本要素並不是一個完美的過程。 但是，它仍然值得您花時間和精力。