How to refactor CSS?

Question

css

Hello.
I would like to describe the situation and ask what ideas you have about this.
The situation is this: there are more than 100 css and more than 40 js files in the project, while there are some so-called. common.css and common.js files with more than 5000 lines. At the same time, most of the css lines are not used anywhere, this is, so to speak, a historical heritage that lies "so as not to break anything." Styles from different files intersect and complement/overload each other. Everything rests on snot and a change in any style can lead to a chain of changes in the display in different places on the site. In short - the HELL of front-end workers, into which they drove themselves.
I'm not a frontend technologist, purely a side server, but there is a task - to somehow distribute and predict work on optimization and general refactoring of the face. Therefore, I wanted to ask how it is fashionable to do now, so that there would be fewer problems in the future. To be honest, I can’t even think of anything myself, except for the radical “take grunt and redo it from scratch”. Most likely, there are some tools that will go through the entire site and tell you which styles are used and which are not. At least get rid of the historical heritage.

Answer 1

Try running it through CSSO
Merging blocks with the same selectors
Merging blocks with the same properties
Removing overlapping properties
Removing overlapped shorthand properties
Removing duplicate selectors
Partially merging blocks
Partially splitting blocks
Removing empty ruleset and at-rule

Answer 2

I think that even if we combine, as Konstantin advised, something will still go somewhere, and you won’t notice it right away. Converting from scratch is ideal and, perhaps, the best option.