How to fix a layout with a large number of inherited styles?

Question

css

There is a catalog of products on Bitrix, which accordingly uses components with their own styles.
(Whoever worked with Bitrisk knows how immense the number of folders and files is there).
There is also the layout of the catalog page from the html template.
All this is soldered into a single code. The result is a confusing mix in which a bunch of files with styles.
How to clear all this goodness. To get an adequate page?
You can’t just reverse it, because there are already components with their own styles.
Yes, and there is a ready-made template with an adequate layout. And here at connection the nonsense turns out.

Answer 1

Well, what are the options? Take and edit styles. If you don’t feel like taking a steam bath, include at the very end a separate .css with edits in which you will overwrite the properties you need. Just remember to respect the specificity (weight) of the selectors so that the properties are still overwritten with fewer !importants.

Answer 2

How is it soldered? Automatically? Then, firstly, in the resulting file, in the comments, there are paths to the source files, and secondly, you can uncheck the corresponding checkbox in the settings of the main module and reset the cache to the pages, and you will see all the files separately.