Member-only story
3 Libraries to Remove Unused CSS
And why you would use a library to do this task
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.
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…
