How to determine which, if any CSS rules are unused on a site
So this is a really interesting way to determine which, if any CSS rules are unused in a stylesheet, site-wide:
Part of this story could certainly be about deleting CSS that is determined to be “unused” in a project. I know there is incredible demand for this kind of tooling. I feel like there are some developers damn near frothing at the mouth to blast their CSS through some kind of fancy tool to strip away anything unneeded.
[…]
Here’s how one company I heard from was doing it:
- They injected a script onto the page for some subset of users.
- The script would look at the CSSOM and find every single selector in the CSS for that page.
- It would also run a querySelectorAll(“*”) and find every single DOM node on that page.
- It would compare those two sets and find all selectors that seemed to be unused.
- In order to get the best results, it would fire this script after a random amount of seconds, on a random set of users, in a random set of conditions. Even with this, it needed a lot of data over a long period of time.
- After that had run for long enough, there was a set of CSS selectors that seemed likely to be unused.
- To be sure, unique background images were applied to all those selectors.
- After applying those and waiting for another length of time, the server logs were checked to make sure those images were never accessed. If they were, that selector was used, and would have to stay.
Ultimately, the unused selectors could safely be deleted from the CSS.Whew! That’s an awful lot of work to remove some CSS.
But as you can imagine, it’s fairly safe. Imagine just checking one page’s CSS coverage. You’ll definitely find a bunch of unused CSS. One page, in one specific state, is not representative of your entire website.
