what it does:
it analyses your html dom and looks for css classes. Then it extracts it all and combines it into 1 single css file.
I used 5 css framworks which was on 340kb kb. This tool made it 36kb!
Your problem was not that your CSS was 340 KBytes, but the simple fact you were using 5 CSS frameworks. And if you start removing unused styles at random, any time you want to work on the site and add features you may encounter edge cases where the style you want to use has been removed. And, if your CSS is used on multiple pages with different layouts, it looks like you will need to manually browse each one and merge the results.
Generally, you'd want tools in your build pipeline that do this automatically (see my other post). Doing so solves all your objections. You're free to later use styles that you hadn't been using -- they're still there in the source CSS, so when you rebuild, they just don't get pruned out anymore. And those tools don't just analyze a single html file, they examine your entire source tree, so you don't have problems with styles used on some pages but not others.
The Purge documentation claims that a third tool, UnCSS, may be even more accurate.
So like combine all the same background colour references etc. I suppose this would require HTML changes too, but am interested to see if this has been done.
But yes, I actually use both tools in series. I get a small reduction from Purifying the output of Purge (I haven't actually bothered to diff it to see where), and Purify stitches the files together and minifies in addition to pruning.
I created an experiment to do this 8 years ago (time sure does fly): https://github.com/driverdan/cssess
There have been a bunch of other projects that do this as well. purifycss, purgecss, and uncss among others.
I needed something like this to tell exactly what bootstrap components I am using. So later down the road I can completely remove it and rewrite my own, while still have something to reference to