Our Team’s CSS Situation

CSS can get out of hand really fast. Without a proper strategy, duplicate rules will litter your codebase and managing your files would make development more challenging.

Our team recently converted a few pages to a React application but continued to use our existing CSS infrastructure. We didn’t want to re-write our CSS and we were happy with how reusable our rules were. We have many SCSS partials and break them out by elements and features: variables, icons, buttons, forms, tabs, etc.

We have one or two shared stylesheets that contain rules shared on many pages such as navigation, buttons, and footer styles. Then we have additional SCSS files for page specific styles like homepage, login page, and pricing page.

When converting some of our existing pages to React, we were doing some code cleanup and decided we could do a better job of reducing the CSS being loaded. We knew we had many unused rules and sought to make it better. One of the tools we came across was conveniently built into Chrome — the Code Coverage Drawer.

Chrome Dev Tools Command Menu

The command menu allows you to run a dev tools command quickly. Try it yourself by opening Chrome Dev Tools and typing command > shift > p and then entering a search. You can quickly enable 3G throttling, switch to a panel, toggle a drawer, and many other commands.

command > shift > p

Code Coverage Drawer

The coverage drawer was introduced in Chrome 59 and is surprisingly a lesser known feature. It displays the amount of unused JavaScript and CSS in each of your files. This obviously has many benefits in helping us make our files as small as possible and only loading the resources we absolutely need.

You need to enable it by opening the Command Menu and then choosing Show Coverage.

The Code Coverage tab will show up in the drawer section of Chrome Dev Tools. To toggle the drawer and other tabs in this section, you can click the esc key.

Start capturing by clicking the record or refresh button.

If you are recording, you can resize your browser window to trigger your media queries and hopefully you will see the unused bytes go down. If you click one of the urls you can see which lines of code are being used.

Results

88% of our CSS was unused. Yikes. At first glance this seemed really bad, until we realized that animation keyframes, print media queries, countless grid classes, and other rules that are not often used were being loaded. We were able to identify some clear rules that shouldn’t be loaded and fixed them up for a quick win.

The Chrome Coverage Drawer is a great starting point because it can quickly show us if we are are loading homepage styles on the profile page.

Next Steps

Write CSS in JSX. Too drastic? This had always seemed like a throwaway idea but the argument is becoming more and more relevant each year. Once you start working with React and are looking to save every byte, it doesn’t seem too far off.

Our team is looking into having an even smaller base CSS file and possibly importing page styles into React components.

Chrome Coverage Drawer is a great tool to help identify legacy CSS rules as well as hidden features that may have stuck around. It might even help you restructure your CSS files into an ever more modular and manageable system.

Moving Forward with Chrome Development Tools

Here is a video of the Chrome team introducing the Code Coverage feature.

Our team tries to stay up to date with the latest dev changes to help us debug better. Google Chrome updates about every 2 weeks and they usually release a development video with all the changes in the dev tools. I would recommended following them, as they release regular updates that help make developers’ lives a little better.