How to optimize changing the style file?

Question

css

Greetings.

Faced with a situation when in a working project it was necessary to change the header of the site. The task seemed simple: write HTML, set style rules. There were no difficulties with replacing the HTML header - I opened the file, deleted the old one, inserted the new one, but I had to spend a lot of time replacing the already written style rules. The fact is that all the rules are placed in one file, there are a lot of them, they are scattered throughout the file - first there are styles for large windows, and then we go down to smaller windows through media queries. I had to look for styles throughout the file related to the old header and check, just in case, if there is anything inside them that could affect the display of other blocks of the site. In general, this search and verification took a long time.

I would like to somehow optimize this whole thing, for example, write the code for the site header in a separate style file, for the menu in another, and so on, and then just somehow combine these files into one. If changes are needed, for example, in the site header, one could simply open a separate file, make changes to it and merge it with others again. I don’t know ...

What useful advice can you give on this case? Surely there are some useful practices.