Detecting dead css

I recently faced an interesting problem on a CRM-like application developed a while ago with friends. The kind of student project in which you accumulate overly complex code, bad design choices and technical debt. It's a good thing this code is actually used by a company, it forces us to:

  • Realize how much we sucked
  • Regularly ship small fixes and features
  • Improve over time :)

So, if you make something, show it, ship it, make it available and use it yourself! It's the best way to get harsh feed-backs and improve!

The problem I faced appeared after we spent some time cleaning the views of the application. We removed so much code in the templates, most of our css became dead so I needed a way to track the unused selectors. There are several solutions to this problem:

Chrome Audits

The Chrome audits tab can detect unused css among other things (coockie size, browser caching, static content serving...). The goal of this tab is to minimize the size of the webpage and as a consequence the load time, amazing!

The same functionality exists in Firefox, unfortunately, in both cases, it will only report unused css in the current page while I needed a global report for all pages.

PurifyCSS

This javascript package takes some content + stylesheets and returns only the used CSS. Sounds like what I'm looking for! Well, not necessarily and for two reasons:

In short, I found it too smart. Reading PurifyCSS's README, all I could think about was: Does it really cover all use cases? What about false positives and false negatives? What if I lose usefull css rules and break the UI?

When looking for existing tools to solve a simple problem, I'm very skeptical about smart solutions. I would always prefer minimalist solutions, tools with single responsibility, programs that do one thing and do it well

dead_css

I didn't like existing solutions so I developed my own gem. This is actually a very bad habit; usually I would spend more time searching than developing since the best code is no code at all but I was curious about packaging and publishing a rubygem so I went for it... and I was not disappointed!

It was super easy to deliver my work to the community! It's the first time I built something and proposed it to the entire world and it is an incredible feeling. Well, the gem really sucks... I'm confident nobody will face the same problem and if someone does, he/she will get really frustrated from using dead_css. Anyway, I was happy to `gem push` and ship publicly and can't wait to do it again!