My application has become unexpectedly big and every now and then something breaks up. I'm in a state where I am going through 10k+ lines of code to fix something I coded a month ago and have been applying hotfixes to different components.
How do I organize my already big CSS file to make it more manageable?
If the code base is in pure CSS, one option is to use @import. You can also try using SCSS/SASS, and organize different components into different files. Have a look here.
Break your stylesheet up into components (known as modularizing) based on what they do, for example form styles could belong in a forms.css.
@import 'forms.css';
You could also benefit from one of the many pre-processors available such as LESS, Sass and Stylus which can help you break things down into files as well as a bunch of other neat things.
Robert van der Elst
Front End Designer
Take a look in this topic: hashnode.com/post/what-is-the-best-way-to-organiz… :)