The 2020 State of CSS Survey had a section dedicated to utility libraries. In that section, the question was about the usage of StyleLint, PurgeCSS, and PurifyCSS. Two of those libraries are for removing unused CSS. As the author of PurgeCSS and a contributor to PurifyCSS, I want to take a moment to explain what problems those libraries can solve and compare the three most popular libraries to do this job.
Medium:
/ 3-libraries-to-remove-...
/ membership
Why Do You Need a Library to Remove Unused CSS?
Like every library, their usage depends on use cases and there are situations where it doesn’t make sense to use them. The most common use case for the libraries in this article is to remove unused CSS with CSS frameworks.
CSS frameworks
My past experiences with Bootstrap were not pleasant, mainly because I wanted to use CSS frameworks for small websites. They always ended up being bloated - especially for a single static page. Bootstrap offered the possibility to go on the website and select what features you will use to download a trimmed version of their CSS framework. The developer experience was poor.
In comparison, TailwindCSS has the option to use PurgeCSS to remove the unused CSS automatically. When using TailwindCSS, you rarely ask yourself if you should consider another framework to trim down your website. And you rarely have to change your settings to deactivate rules.
Legacy websites
Another use case is the legacy sites that got out of hand. While you can ask for developer resources to clean up the CSS mess accumulated over time, you can take the initiative by using this tool first. Those libraries will add value to your website right away and help identify the unused CSS.
Critical pages
Some companies have different teams taking care of multiple parts of the website. One team can be in charge of the main application page, another in charge of the signup and payment pages, and another will handle settings and administration pages.
In those situations, code is not always seen between the teams. They might choose to have a common CSS framework and not remove any CSS from it to take advantage of caching. But there should still be an exception for critical pages.
Pages that are seen once and require high loading performances, such as the signup and payment pages, can use those libraries to remove unused CSS from their framework and preload the full version once on the final signup step.
PurgeCSS
purgecss.com/
github.com/FullHuman/purgecss
00:00 Quick Thanks
00:22 Introduction
01:18 Why use a library to remove unused CSS
01:30 Why? CSS Framework
03:17 Why? Legacy Websites
04:11 Why? Critical Pages
05:05 PurgeCSS
06:10 Main difference with PurifyCSS
08:53 UnCSS
10:53 Recap & Recommendation
11:52 Outro
Follow me on
Medium: / floriel
GitHub: github.com/Ffloriel