It is an inevitable fact that your large web project will suffer from tech debt sooner or later. On the front-end, this can have various causes including design iterations, feature changes or technology updates. This can lead to bloated stylesheets which not only decrease performance for the end customer but also make follow up work much more difficult. Getting rid of this type of tech debt can be cumbersome and time intensive. And more often than not, engineers do not have the time to circle back and polish their code, as the next deadline already looms on the horizon.
At Intuit I have been working on multiple projects that required major changes in existing repositories. To be able to move fast, I made a habit of cleaning up the code base before starting my front-end work to get rid of some of our tech debt. But early on I realized that there are repetitive tasks that could easily be automated. As I went browsing the internet for existing approaches I realized that there were no simple solutions out there, so I set out to create my own.
The results of this initiative are four handy shell scripts that can be easily run in your code base. They parse any given folder for unused files or strings and evaluate what SCSS elements can be removed. The scripts target mainly Sass files, but with simple adjustments they can be used to find other redundancies as well.
What do they do?
Each of the scripts tackles a different area of your front-end styles:
Scan a directory for all image files that are not referenced in the code of that directory. The script offers an option to automatically delete them from your folder.
List all SCSS files that are not imported by other files. This will help you find orphaned stylesheets (If you use Grunt or Gulp to concatenate your stylesheets automatically, this obviously won’t work).
Variables & Mixins
This works for SCSS stylesheets. List any mixins and variables that are either unused, have duplicated declarations or are only used once. With this list you can go in and manually adjust stylesheets to avoid style overwrites or unnecessary duplications.
Print a list of all dependencies in SCSS files. This will help to identify external dependencies that bloat your code or give the opportunity to consolidate your stylesheet dependencies without having to look through every single file.
Running these four scripts on your code base will give you an excellent starting point for removing unused parts of your front-end code. Tasks that would take multiple hours of manual labor can now be done in a matter of minutes. Just running the scripts for unused images and stylesheets enabled me to reduce repositories by up to half their size in some projects.
Overall, the SCSS-Cleanup scripts provide an easy way to decrease CSS tech debt. They are relevant for any company with a large browser-based product or any project with a large front-end code base. Removing unnecessary bits and bytes results in improved code hygiene, faster load time for customers, less confusing code and smaller repositories. The SCSS-Cleanup scripts are a big win that will help developers, so they can focus more on innovation and unsolved problems.
The scripts can be found here: https://github.com/intuit/scss-cleanup-scripts