How to organize styles in a large project?

Question

css

I want to use sass in the project, and the idea came to divide the styles into 2 main folders: "header" and "footer". In the first - those that will be loaded at the very beginning, in the second - respectively, those that will be loaded after the rest of the content. The goal is to speed up the loading of the site and, of course, please Google PageSpeed. Tell me, how is it customary to do this in large projects? Is it convenient to edit styles with such a structure?

Answer 1

Split files into separate blocks. Just create critical.scss and main.scss files. In main, connect everything, in critical only what is needed for the first screen.
This way all your styles in the main file will be organized as usual, but you will be able to create different critical files for different pages.