Recently while working on a website with a huge css file (600kb) we set out to remove all unwanted and unused styles. As this file contained over 25,000 lines - an automated tool was required. Google pagespeed and Chrome dev tools reported that over 97% of this file contained unused styles.

There are a number of ways to do this. Using Chromes developer toolkit (audits tab) we can easily identify the unused CSS styles; however removing them is not automated. Using Firefox's 'Unused CSS' plugin was similar: identifying unused CSS but not removing.

Upon further reading we found the Firefox 'Dust Me' plugin (https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/) - however this wasn't perfect either.

There are a couple of bugs with this software, and we will explain a workaround using sublime text editor below.

To automatically export unused CSS:

  1. Install the 'Dust Me' plugin using Firefox
  2. Navigate to the page which contains the large CSS file, and load it
  3. Click the 'duster' icon and wait
  4. Scroll to the large file, and click 'clean'
  5. Export this to a file

Now you will see a few issues:

  1. Some styles which should have been removed have the javascript keyword 'undefined' (this means our example file contained thousands of lines with the useless selector 'undefined')
  2. Some selectors have been removed, but the 'comma' between the bracket has been left (for example h1,h2,h3,{font-size:13px;}). This means some styles which should work don't

The first issue can be fixed easily: just search for 'undefined' and replace with nothing using your favorite text editor.

The second issue requires regex search and replace. I suggest doing this with Sublime or Vim, but any text editor with regex search and replace capabilities will work.

Using Sublime, simply search for the regular expression below and replace with nothing.

,(\s+){

Thats it!

To quickly and easily minify this file using linux, I recommend the command line tool 'yui-compressor'. This can be easily installed in ubuntu using the usual command:

sudo apt install yui-compressor

To minify css or javascript code, simply run the following using filenames of your choice:

yui-compressor large-css-file.css > output.css

Wednesday, October 5, 2016

« Back