How to Remove Unused CSS

Reduce your CSS files more than 60% during your development workflow with Purgecss.

Luca Spezzano
Sep 11, 2019 · 3 min read
Image for post
Image for post

I have been searching for a while a tool that will allow me to clean my CSS from unused style.

Why was I looking for this kind of tool? Because nowadays almost every developer uses a lot of CSS frameworks and libraries to develop interfaces faster and easier so it is inevitably that the size of css files increase a lot.

But how much of the CSS style that you import from external libraries you really use? Sometimes even less than 20%, so why do you need to have all this unused style? No reason!

Purgecss

Here Purgecss come to help, it is a tool which helps to remove unused CSS and it can be used as part of your development workflow.

How Purgecss is working under the scene? It needs to know:

  1. the file css that you want to clean.

So from the initial css file[1] it will search in your html files(for example)[2] and from there it will create a new css file[3] only with the style that you really used.

I’m sure that if you try it you will be able to reduce more than 60% the size of your CSS.

The build tools

The cool thing of Purgecss is that you can implement it in your development workflow with a lot of popular build tools:

  • CLI

The JS frameworks

We can use it also with the most modern JavaScript frameworks such as:

  • React

How to use Purgecss

I wrote a whole article about how to set up a CSS build process with Gulp, there I used also Purgecss so if you are interested in this build process I suggest you to read this article.

Here I will show you how to implement Purgecss with Gulp and Nuxt.js but you can read the official documentation here to know how to implement Purgecss in different ways.

Purgecss with Gulp

At first you need to install the package with npm or yarn.

npm i -D gulp-purgecss

or

yarn add gulp-purgecss

after in your gulpfile.js you need to import the package that you just added

const gulp = require('gulp'),
purgecss = require('gulp-purgecss');

and after you need just to create your task like that:

gulp.task('purgecss', () => {
return gulp
.src('src/**/*.css')
.pipe(
purgecss({
content: ['src/**/*.html']
})
)
.pipe(gulp.dest('build/'))
})

ps. if you are running your task in series or sequence remember to run this task after that you generate your html files, if not the task will generate an error.

Purgecss with Nuxt.js

In the beginning when I saw that Purgecss was working with HTML files I got upset because in the last months I’m developing different projects with Nuxt.js and for me it’s very important to optimize my files. But reading the documentation I found out that you can implement Purgecss with the most modern JS frameworks such React, Vue, Next and Nuxt.

Let’s see how to use Purgecss in your Nuxt projects

At first you need to install the following packages to your project with npm or yarn

npm i --save-dev glob-all purgecss-webpack-plugin

or

yarn add glob-all purgecss-webpack-plugin

Now in your nuxt.config.js you need to import them (outside of the export default)

import PurgecssPlugin from 'purgecss-webpack-plugin'
import glob from 'glob-all'
import path from 'path'

Inside your export default you need to add this in your build configuration

build: {
extractCSS: true,
extend(config, { isDev, isClient }) {
if (!isDev && isClient) {
config.plugins.push(
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './pages/**/*.vue'),
path.join(__dirname, './layouts/**/*.vue'),
path.join(__dirname, './components/**/*.vue')
]),
whitelist: ['html', 'body']
})
)
}
}
}

And it’s done!

Try Purgecss and let me know how much you have reduced from your files 😉

If you are interested how to write Scalable and Maintainable CSS code read this article about CSS methodologies.

NotOnlyCSS

This publication includes original articles and tips about…

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store