{"componentChunkName":"component---src-templates-tags-js","path":"/tags/unused/","result":{"data":{"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"id":"aecc03c1-62eb-5fb9-9057-340b807540d2","html":"

Unused CSS is a one of the issues most web applications suffer when it comes to performance and page load time.

\n\n

Disclaimer

\n

Apart from option one in this post, most of the time you will need a tool and some manual intervention to be able to safely eliminate unused CSS. These tools are great in a sense that they will let you know what you don’t know; which classes in your template files are not used.

\n

These tools can’t work with complex scenarios like when you have JavaScript adding a DOM element in the template.

\n

They will have problems with dynamic templates in Single Page Applications (SPA) or when your template changes based on a state on your server side code.

\n

Problem

\n

As I said, Unused CSS is a one of the issues most web applications suffer when it comes to performance and page load time.

\n

This even gets worst when you use a CSS library like Tailwind, or an older versions of CSS frameworks like Bootstrap or Material Design.

\n
Note: most CSS frameworks have moved to modular structure where you could import only the part you need without having to include the whole bundle.
\n

Best and safest approach

\n

To my opinion, the best and safest approach is to be careful and get rid of any CSS file or part you remove from your HTML or template files. Do not be lazy or ignorance when it comes to tech debts like this. If you’re involved in a green field project, make sure you do not copy paste large chunks of CSS from somewhere you’re looking into without realising which parts are actually used.

\n

You can manually find your unused CSS using the DevTools in Google Chrome with following these steps:

\n
    \n
  1. Open the Chrome DevTools using F12 or Ctrl Shift J on Windows or Command Option J on Mac.
    2. \n
  2. Open the command menu by pressing Ctrl Shift P on Windows or Command Shift J on Mac.
    3. \n
  3. Type in “Coverage” and click on the “Show Coverage” option
    4. \n
  4. Click on reload button at the coverage tab.
    5. \n
  5. Select a CSS file from the Coverage tab which will open the file up in the Sources tab.
    6. \n
\n

Any CSS rule which has a solid green line on the left side is used. Those with a red line are not:

\n

\n \n \n

\n
Warning: Just because a rule isn’t used on this page doesn’t mean it’s not used elsewhere. You would ideally check the coverage on all pages and combine the result for a better overview.\r\n
\n

Tools

\n

Some times you cannot adhere to ☝🏼 point because of various reasons. Such as you got involved in a brown field project or the code base is to large to be able to refactor and fix the issue in a timely fashion.

\n

In this case you might be looking at some tool to automate the process and do the clean-up systematically during build time. Fortunately there are many tools available which help you with this. I will cover some famous ones and mention a short list at the end for good measure 😉.

\n

1. PurifyCSS

\n

PurifyCSS is tool that can analyse your files, go through code, and figure out what classes are not used. Most of the time when you have static HTML files this tool can eliminate nearly all your unused CSS.

\n

Apart from that, it can also work to a degree with Single Page Applications (SPA).

\n

Setup

\n

Standalone

\n

You can install this package via npm:

\n\n \n Copy\n \n \n
npm i -D purify-css
\n

And some basic usage:

\n\n \n Copy\n \n \n
import purify from 'purify-css'\r\nconst purify = require('purify-css')\r\n\r\nlet content = ''\r\nlet css = ''\r\nlet options = {\r\n  output: 'filepath/output.css',\r\n}\r\npurify(content, css, options)
\n

If you’re wondering well, this is not gonna help me, you might be right. But this is the simplest form. In fact in the purify command, content and css parameters can be an Array of glob file patterns. Now you see the bigger picture and how this can help.

\n

Now let’s make it a bit more complex.

\n

via Grunt

\n

First you need to install the grunt package:

\n\n \n Copy\n \n \n
npm install grunt-purifycss --save-dev
\n

And then use it:

\n\n \n Copy\n \n \n
grunt.initConfig({\r\n  purifycss: {\r\n    options: {},\r\n    target: {\r\n      src: ['path/to/*.html', 'path/to/*.js'],\r\n      css: ['path/to/*.css'],\r\n      dest: 'tmp/purestyles.css',\r\n    },\r\n  },\r\n})
\n

This will handle even scenarios when you have a class added using JavaScript 😍. So this will be picked up:

\n\r\n\r\n
click
`, `2828406569132902000`)\"\n >\n \n Copy\n \n \n
<!-- html -->\r\n<!-- class directly on element -->\r\n<div class=\"button-active\">click</div>
\n

Or in JavaScript:

\n\n \n Copy\n \n \n
// javascript\r\n// Anytime your class name is together in your files, it will find it.\r\n$(button).addClass('button-active')
\n

Or even a bit more complex scenario:

\nSubmit;\r\n);`, `31829207410996306000`)\"\n >\n \n Copy\n \n \n
// Can detect if class is split.\r\nvar half = 'button-';\r\n$(button).addClass(half + 'active');\r\n\r\n// Can detect if class is joined.\r\nvar dynamicClass = ['button', 'active'].join('-');\r\n$(button).addClass(dynamicClass);\r\n\r\n// Can detect various more ways, including all Javascript frameworks.\r\n// A React example.\r\nvar classes = classNames({\r\n  'button-active': this.state.buttonActive\r\n});\r\n\r\nreturn (\r\n  <button className={classes}>Submit</button>;\r\n);
\n
Warning: The Webpack plugin for purifycss is deprecated. You will need to use Purgecss which I will go through later on.
\n

CLI

\n

Install the CLI:

\n\n \n Copy\n \n \n
npm install -g purify-css
\n

And you can see the help using -h param:

\n [option]\r\n\r\nOptions:\r\n -m, --min Minify CSS [boolean] [default: false]\r\n -o, --out Filepath to write purified css to [string]\r\n -i, --info Logs info on how much css was removed [boolean] [default: false]\r\n -r, --rejected Logs the CSS rules that were removed [boolean] [default: false]\r\n -w, --whitelist List of classes that should not be removed [array] [default: []]\r\n -h, --help Show help [boolean]\r\n -v, --version Show version number [boolean]`, `83067729873434790000`)\"\n >\n \n Copy\n \n \n
purifycss -h\r\n\r\npurifycss <css> <content> [option]\r\n\r\nOptions:\r\n  -m, --min        Minify CSS                                   [boolean] [default: false]\r\n  -o, --out        Filepath to write purified css to                              [string]\r\n  -i, --info       Logs info on how much css was removed        [boolean] [default: false]\r\n  -r, --rejected   Logs the CSS rules that were removed         [boolean] [default: false]\r\n  -w, --whitelist  List of classes that should not be removed        [array] [default: []]\r\n  -h, --help       Show help                                                     [boolean]\r\n  -v, --version    Show version number                                           [boolean]
\n

Stats

\n

This library can help you big time. It’s pretty effective and works on complex scenarios. But as I mentioned before you will need to have good tests to able to find out if anything is messed up after clean-up.

\n
\n

In terms of Boostrap, PurifyCSS can reduce up to ~ 33.8% of unused CSS.

\n
\n

2. Purgecss

\n

Purgecss is another powerful tool to remove unused CSS. It can be used as part of your development workflow. It comes with a JavaScript API, a CLI, and plugins for popular build tools.

\n

CLI

\n

You can install Purgecss globally or using npx.

\n\n \n Copy\n \n \n
npm i -g Purgecss
\n

And use it:

\n --content [option]`, `64623950512630415000`)\"\n >\n \n Copy\n \n \n
Purgecss --css <css> --content <content> [option]
\n

As you can see, the API is very similar to PurifyCSS, but of course options would be different.

\n

Via Webpack

\n

You should install the plugin first:

\n\n \n Copy\n \n \n
npm i -D Purgecss-webpack-plugin
\n

And the add it to your Webpack config:

\n\n \n Copy\n \n \n
const path = require('path')\r\nconst glob = require('glob')\r\nconst ExtractTextPlugin = require('extract-text-webpack-plugin')\r\nconst PurgecssPlugin = require('Purgecss-webpack-plugin')\r\n\r\nconst PATHS = {\r\n  src: path.join(__dirname, 'src'),\r\n}\r\n\r\nmodule.exports = {\r\n  entry: './src/index.js',\r\n  output: {\r\n    filename: 'bundle.js',\r\n    path: path.join(__dirname, 'dist'),\r\n  },\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.css$/,\r\n        use: ExtractTextPlugin.extract({\r\n          fallback: 'style-loader',\r\n          use: 'css-loader?sourceMap',\r\n        }),\r\n      },\r\n    ],\r\n  },\r\n  plugins: [\r\n    new ExtractTextPlugin('[name].css?[hash]'),\r\n    new PurgecssPlugin({\r\n      paths: glob.sync(`${PATHS.src}/**/*`, {\r\n        nodir: true,\r\n      }),\r\n    }),\r\n  ],\r\n}
\n

For more information please refer to their documents.

\n

3. UnCSS

\n

UnCSS is another tool to help you remove your unused CSS. But this tool is a bit different in sense that it will load your files in jsdom, then will parse all the stylesheets with PostCSS.

\n

Once finished, document.querySelector will filter out selectors that are not found in the HTML files. And finally, the remaining rules are converted back to CSS.

\n
Note: The best thing about this library which I am in love with, is their unofficial server where you can paste your HTML and CSS it will show you the shortened CSS online.
\n

Install

\n

Again you can use npm to install it or use npx:

\n
npm i -g uncss
\n

You can use UnCSS with node:

\n\n \n Copy\n \n \n
var uncss = require('uncss')\r\n\r\nvar files = [\r\n    'my',\r\n    'array',\r\n    'of',\r\n    'HTML',\r\n    'files',\r\n    'or',\r\n    'http://urls.com',\r\n  ],\r\n  options = {\r\n    ignore: ['#added_at_runtime', /test\\-[0-9]+/],\r\n    media: [\r\n      '(min-width: 700px) handheld and (orientation: landscape)',\r\n    ],\r\n    csspath: '../public/css/',\r\n    raw: 'h1 { color: green }',\r\n    stylesheets: [\r\n      'lib/bootstrap/dist/css/bootstrap.css',\r\n      'src/public/css/main.css',\r\n    ],\r\n    ignoreSheets: [/fonts.googleapis/],\r\n    timeout: 1000,\r\n    htmlroot: 'public',\r\n    report: false,\r\n    banner: false,\r\n    uncssrc: '.uncssrc',\r\n    userAgent:\r\n      'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',\r\n    inject: function(window) {\r\n      window.document\r\n        .querySelector('html')\r\n        .classList.add('no-csscalc', 'csscalc')\r\n    },\r\n  }\r\n\r\nuncss(files, options, function(error, output) {\r\n  console.log(output)\r\n})\r\n\r\n/* Look Ma, no options! */\r\nuncss(files, function(error, output) {\r\n  console.log(output)\r\n})\r\n\r\n/* Specifying raw HTML */\r\nvar rawHtml = '...'\r\n\r\nuncss(rawHtml, options, function(error, output) {\r\n  console.log(output)\r\n})
\n

Or use their build flows which supports Gulp, Grunt and Broccoli (unfortunately no Webpack 😔). For more information about how to setup those tools refer to their documentation.

\n

Comparison

\n

Now let’s compare these tools and see their pros and cons.

\n

PurifyCSS

\n

Some people believe the biggest problem with PurifyCSS is lack of modularity. Some think it’s also its biggest benefit 🤷🏽‍♂️. It can work with any file type not just HTML. It can also find selectors which are added using JavaScript.

\n

Unfortunately since every word is considered a selector, this can end up in a lot of false positives and make the resulting CSS a bit larger than it should be.

\n

Purgecss

\n

Purgecss fixes the above issue by providing the possibility to create an extractor. This is simply a function which takes content of a file and extracts the list of CSS selectors used in it.

\n

The extractor can be used as a parser that returns an AST (abstract syntax tree) and looks through it to find any CSS selectors. This is the way purge-from-html works. You can specify which selectors you want to use for each file type, allowing you to get the most accurate results. Additionally, you can use the default or legacy extractor, which will mimic PurifyCSS’s behaviour.

\n

That said, Purgecss has some drawbacks too. FIrst and foremost you will need to write a custom extractor for frameworks like Tailwind. Another problem is when you use a syntax highlighter like primjs, in which case you will have to whitelist your token classes using a property called whitelistPatternsChildren.

\n

Another point to consider is that Purgecss doesn’t have an extractor for JavaScript files. But because of its modularity, developers can create custom extractors for frameworks like Angular, React or Vue.

\n

UnCSS

\n

Because of its HTML emulation and JavaScript execution, UnCSS is effective at removing unused selectors from web applications. However, its emulation can have a cost in terms of performance and practicality.

\n

At this point in time, UnCSS is probably the most accurate tool to remove unused CSS if you do not use server-side rendering.

\n

Other tools

\n

Here is of other tools you can consider:

\n
    \n
  • GitBit: an online tool which crawls your root page and stylesheets linked in it.
    • \n
  • UnusedCSS: another online tool which easily find and removes unused CSS rules
    • \n
\n

Summary

\n

Although these tools are really helpful in terms of finding unused CSS, each has its own drawbacks and you will need to be careful to not end up with a broken UI.

\n

Hope you’ve gained just a tiny bit insight on how to find your unused CSS and deploy them to space 😁👇.

\n

Deploy... to Space?!? 🚀🔥🤯 https://t.co/zb8jNPs5zs

— StackBlitz (@stackblitz) May 2, 2019
","timeToRead":7,"frontmatter":{"title":"Knock out your unused CSS","unformattedDate":"2019-05-07T00:00:00.000Z","date":"May 07, 2019","path":"/unused-css/","author":"Yaser Adel Mehraban","tags":["css","webperf","unused"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQBA//EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAb7OVCaB/8QAGBABAAMBAAAAAAAAAAAAAAAAAgABERD/2gAIAQEAAQUCbVMraiBt5z//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwEn/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BZ//EABgQAAMBAQAAAAAAAAAAAAAAAAIQESEA/9oACAEBAAY/Ai3B6qx//8QAGhAAAgMBAQAAAAAAAAAAAAAAAREAIUEQMf/aAAgBAQABPyE50tWGJsGOPix9iDOf/9oADAMBAAIAAwAAABCAz//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPxAIuz//xAAWEQEBAQAAAAAAAAAAAAAAAAABERD/2gAIAQIBAT8QQyZ//8QAHRABAQACAgMBAAAAAAAAAAAAAREAITFBUWFxsf/aAAgBAQABPxACoEQxg737/MlgwsTZhXWRTYcmM8neAiR8w4z/2Q=="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/e9460accffc5bf25ec1f18fea307876f/314d7/css.jpg","srcSet":"/static/e9460accffc5bf25ec1f18fea307876f/314d7/css.jpg 600w","sizes":"(min-width: 600px) 600px, 100vw"},"sources":[{"srcSet":"/static/e9460accffc5bf25ec1f18fea307876f/2c469/css.webp 600w","type":"image/webp","sizes":"(min-width: 600px) 600px, 100vw"}]},"width":600,"height":331}}}}}}]}},"pageContext":{"tag":"unused"}},"staticQueryHashes":[],"slicesMap":{}}