Remove redundant css rules from a dynamic website

Question

I am trying to reduce the size of my CSS file. This is from a template that is very CSS and JS heavy. Even with CSSMin, the CSS file size is 250kb.

While I use a lot of CSS - I know that I do not use all this. Therefore, I am trying to determine which styles can be removed. I know about the Dust-Me selector - but this is just a static look at the website. With HTML5 and CSS3, sites are now very dynamic, and most of my CSS comes from dynamic events or “responsive” events, i.e. Bootstrap.

Question: Is there a tool that “writes” all my CSS files to the website over a period of time, so I can go and click / hang / move through each element and interact with my website. Then at the end let me know which styles were and were not used?

Answer 1

250kb is really such a big figure for CSS files only.
Templates usually have all the CSS needed for all pages in a single file.
I would suggest:

Do not shorten your CSS code, they may be needed at some point in time.

Instead, I suggest splitting your CSS file into the number of small files for different page styles, for example, another CSS for the login page, another CSS file for the home page, etc.
Read your CSS and HTML to see how much of the CSS is used in the HTML section.

Update:
You can try Remote Unused CSS CSS Optimizer .
I personally have not used it, I just hope this works for you.

Answer 2

Using CSS is a great extension for firefox. It reports which css is currently used on the page.

Link: https://addons.mozilla.org/en-us/firefox/addon/css-usage/

Answer 3

There are two tools that I think can help you.

helium is a javascript tool that will detect any unused css rules.

csscss is a source code analyzer that will report any duplication. I am biased because I wrote csscss precisely because I could not find anything that would do this. But many think this is useful.