It's simple really. In header's <style> I put CSS to hide root elements of each section targeted by separate stylesheets, which are loaded via https://github.com/filamentgroup/loadCSS . Of course one would want to minimalize code repetition in their styles so that the styles are not repeated for no good reason. CSS that is used across all pages such as utilities/objects/other global styles is loaded the standard way. One also has to watch for bloat from style libraries, since usually it is desirable to have access to all mixins, variables and such in all of your separate stylesheet sources. Not sure if that is enough to create write up or some sort of blog post + I am not that great of a writer so I hope this does the deed.

On recent project I split up CSS into multiple files in which there were chunks of layout (e. q. base, header, main, footer..), which were loaded asynchronously after each chunk's HTML so that the page loads/displays it's bits before whole page finishes loading while preventing FOUC. Is this considered good practice at the cost of more HTTP requests?