How to remove extra CSS selectors?

Question

css

There is an html file 1.html to it there is a CSS file 2.css. 2.css has a lot of redundant selectors that are not used in the 1.html document. What service will automatically remove unnecessary selectors when loading these two documents?

Answer 1

The developer tools in Google Chrome will help you find unused css styles. Here is the manual: https://banochkin.com/blog/clean-css/
If I clean the turnkey template, I just make a page where all the possible design options for the blocks on the site are displayed at once, and run the Chrome tool on it. That way you won't accidentally delete "unnecessary" styles.

Answer 2

www.cleancss.com
https://github.com/peterbe/mincss
Personally, I prefer this procedure, like many others in the process, to be done using the magic Grunt - https://github.com/addyosmani/grunt-uncss

Answer 3

intellij IDEA knows how to do this well, and also optimizes these same styles.
You need to select the Analyze -> inspect Code item on the analyzed document and you will be given all the shoals where you can automatically make BA-BACH !!!! extra selectors.

Answer 4

Chrome DevTools seems to be able to do this.

Answer 5

If you want to take a look - use the Google Chrome developer tools (Audits-Run). There was a case when it was necessary to remove a large number of selectors and I used an automatic program:
Dust-Me Selectors - an add-on for FireFox.
I did not find the best solution, everything worked quickly and efficiently.