I have a number of pages in my app that are showing partial FOUCs (flashes of unstyled content) upon loading, which occurs because some of them have stylesheets and/or javascript defined at the head of the document rather than in the layout. The fundamental issue is that the DOM is firing before these stylesheets are loaded.
In order to solve this issue, I imagine there are a few possibilities:
- Delay the DOM firing until after the additional stylesheets are loaded. This would work but it would slow the site down as we would be forcing the DOM to wait for at least two stylesheets to load in series.
- Leave it where it is, FOUCs and all.
- Move the required stylesheets to the layout to be loaded with the rest on the first go. This is performance-optimal but it interferes with a confusion of mine. I have lots of pages that use the same layout but each needs different modifying stylesheets. For example, users may use the application layout but need the users.css file, whereas products may use application layout but need a products.css file. The endpoint of this option is lots of almost identical layouts, the only difference being what css to include (horribly unDRY).
- An elegant technical solution I am not aware of in my intermediacy.
What is the proper way of having different stylesheets included, and is it possible to do this without duplicating layout code?