LESS, Sass, JS-in-CSS, Flexbox, etc., etc.
So, for now at least I file away pretty much all style related work as a hack. With that in mind, I want to share one hack that has been pretty useful for us at GetHuman. Namely, the use of generated inline CSS for increased initial load performance. The way it works is like this:
- At build time in a non-production environment, use Addy Osmani’s critical library to generate inline CSS for each route
- In production, have your server side page look to see if an inline CSS file exists for that template.
- If it does, stick the inline css directly into the server view and lazy load the rest of the CSS using loadCSS.
- If there is no inline CSS, then just have a CSS tag in the header for the main CSS file like you normally would.
By doing this, the page can render lightning fast without waiting for any CSS file at all to download. The main CSS file loads in the background.