PurifyCSS Overview

PurifyCSS is a tool that takes your content files (HTML, JavaScript, PHP, etc.) and your CSS files, and returns only the CSS selectors that you are actually using. It helps you remove unused CSS, which is especially useful when you're using a large CSS framework like Bootstrap, where many selectors often go unused.

PurifyCSS does not modify your original CSS files. Instead, it generates a new, cleaned-up CSS file that you can use in your project, similar to how you would use a minified CSS file.

Key Benefits

The primary benefit of using PurifyCSS is a significant reduction in your CSS file size, leading to faster page loads and a better user experience.

Consider a typical scenario with the Bootstrap CSS framework:

• Original Bootstrap CSS: ~140 KB
• Minified Bootstrap CSS: ~117 KB
• Purified + Minified CSS: ~35 KB (Assuming an application uses about 40% of the selectors)

By removing unused styles, PurifyCSS can drastically decrease the amount of CSS your users need to download.

How It Works

PurifyCSS works by statically analyzing your code to detect which CSS selectors are being used. It's intelligent enough to find selectors even when they are constructed dynamically in your JavaScript code.

For a deeper dive into the mechanics, see the How It Works page.