# purifycss/purifycss

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/purifycss-purifycss).**

9,863 stars · 380 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/purifycss/purifycss
- awesome-repositories: https://awesome-repositories.com/repository/purifycss-purifycss.md

## Description

PurifyCSS is a CSS unused style remover and payload optimizer that analyzes HTML and templates to identify and delete unused CSS selectors from stylesheets. It functions as a frontend build automation tool that integrates into development pipelines to automatically strip redundant styles and minify assets during the compilation phase.

The tool provides specific optimization for single page applications, identifying and removing redundant CSS while ensuring necessary styles are preserved across dynamic views and states.

The utility covers a range of capabilities including static content analysis, selector-based filtering, and the use of whitelists to prevent the deletion of protected style rules. It also includes a minifier to compress final stylesheets by removing unnecessary whitespace and characters.

## Tags

### Web Development

- [CSS Selector Purging](https://awesome-repositories.com/f/web-development/css-selector-purging.md) — A tool that analyzes HTML and templates to identify and delete unused CSS selectors from stylesheets.
- [CSS Purging](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools/css-purging.md) — Identifies and removes unused CSS rules from stylesheets to significantly reduce the total file size. ([source](https://github.com/purifycss/purifycss#readme))
- [Build Automation Pipelines](https://awesome-repositories.com/f/web-development/front-end-development-workflows/build-automation-pipelines.md) — Automates the sequence of stripping unused styles and optimizing assets into production-ready files. ([source](https://github.com/purifycss/purifycss#readme))
- [CSS Build Tools](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools/css-build-tools.md) — Provides a build-time engine that scans source files to strip unused styles and compile optimized CSS.
- [Code Minifiers](https://awesome-repositories.com/f/web-development/code-minifiers.md) — Reduces stylesheet file size by removing unnecessary characters and whitespace. ([source](https://github.com/purifycss/purifycss#readme))
- [CSS Selector Whitelists](https://awesome-repositories.com/f/web-development/css-selector-whitelists.md) — Prevents specific style rules from being deleted via a predefined list of protected strings.
- [Content Minification](https://awesome-repositories.com/f/web-development/response-handlers/content-minification.md) — Compresses final stylesheets by removing unnecessary whitespace and characters to reduce payload size.

### Development Tools & Productivity

- [Frontend Build Tools](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-orchestration-configuration/build-automation-systems/frontend-build-tools.md) — Integrates into development pipelines to automatically clean and minify CSS assets during the compilation phase.
- [Build Pipeline Integrations](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/build-task-automation/build-pipeline-integrations.md) — Integrates style removal and minification directly into continuous integration and deployment pipelines.
- [Build Tool Integrations](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/build-task-automation/build-tool-integrations.md) — Provides plugins and configurations to automate CSS purification within standard build tool workflows.

### Testing & Quality Assurance

- [Static Analysis](https://awesome-repositories.com/f/testing-quality-assurance/code-quality-review/static-analysis.md) — Scans HTML and template files without execution to determine which CSS selectors are actually utilized.

### User Interface & Experience

- [CSS Selectors](https://awesome-repositories.com/f/user-interface-experience/css-selectors.md) — Analyzes stylesheets and content to delete selectors that do not match any existing elements. ([source](https://github.com/purifycss/purifycss/blob/master/.gitignore))
- [Payload Optimization](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/payload-optimization.md) — Reduces the size of delivered CSS by removing unused selectors to improve web page performance.
- [Preservation Lists](https://awesome-repositories.com/f/user-interface-experience/css-selectors/preservation-lists.md) — Allows users to protect specific style rules from being deleted even if not detected in the source. ([source](https://github.com/purifycss/purifycss/blob/master/README.md))

### Part of an Awesome List

- [Asset Minification](https://awesome-repositories.com/f/awesome-lists/devtools/asset-minification.md) — Compresses stylesheets by removing unused rules and whitespace to decrease the amount of data sent to browsers.
- [CSS Optimization](https://awesome-repositories.com/f/awesome-lists/devtools/css-optimization.md) — Remove unused CSS selectors from stylesheets.

### Software Engineering & Architecture

- [Single Page Applications](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/application-architecture-patterns/single-page-applications.md) — Identifies and removes redundant CSS specifically within the context of dynamic single-page applications.
- [Style Optimization](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/application-architecture-patterns/single-page-applications/style-optimization.md) — Optimizes CSS for dynamic web apps while ensuring necessary styles are preserved across different views.
- [Style Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/application-architecture-patterns/single-page-applications/style-optimizations.md) — Preserves necessary selectors across dynamic views and states while removing redundant code in single-page applications.
