Search code examples
cssperformanceminify

CSS remove unused styling

I often override "base" css styling by adding an (example) override.css below the base.css in the head of my sites.

base.css:

a { color: blue; }

And then later in override.css:

a { color: red; }

This might be bad practice, but in my experience a very common way of doing it in most websites. In this very simplified case the css-file would be double the size of what it could be.

Are there any automated tools to remove all unused styling, and only present a "parsed" css-file to the visitors? Would for example example CSS CCC option in Prestashop do this for me?

Solution

  • If you're looking for an automatic method, https://github.com/giakki/uncss

    However, chrome devtools also includes a nice panel for seeing all unused styles, so most likely it's better to do it manually through this. How to use the coverage panel: https://blog.logrocket.com/using-the-chrome-devtools-new-code-coverage-feature-ca96c3dddcaf