Do you have a pile of old CSS styles that you’re pretty sure are no longer referenced anywhere, but that you’re nevertheless afraid to delete because you have no way to be sure that no musty corners of your site somehow depend on them to render correctly?

I’ve been saying for years that the most valuable uses for code coverage have nothing to do with testing, and today I was happy to add another great use case: gaining confidence over which styles are actually safe to delete. The approach in this screencast shows a way to record and combine the code coverage results for our site’s CSS across each web page.

Other automated approaches for identifying dead styles exist, but modern CSS has introduced so many context-dependent selectors (e.g. media queries and pseudo-elements) that nothing can beat recording coverage while manually resizing and clicking around your custom components like only you know how.

Stuff covered in this video:

Justin Searls

Person An icon of a human figure Status
Double Agent
Hash An icon of a hash sign Code Name
Agent 002
Location An icon of a map marker Location
Orlando, FL