#ASKTHEINDUSTRY 19: How do you handle above-the-fold CSS?

There are two ways that I know of:

1. You use a tool like CriticalCSS to find and inline the styles you need for the visible above the fold content
2. You manually author CSS with the above the fold idea in mind

I choose the second option, but it may not be the best. You tell me.

Here is what I do:

• I author my CSS using SASS
• I split my SASS partials by component
• I transpile two SASS files per page, for example: home.core.sass and home.later.sass
• In home.core.sass I @import only those components that I figure should be rendered immediately
• In home.later.sass I @import all the rest

Now. Here comes the easy part:

• Embed home.core.css in a <style> tag in the head of the document. I usually use jade (or, recently, dust) for this. In jade you can

style
      include /static/styles/home.core.css

• Asynchronously load in home.later.css. I strongly advise you use loadCSS by the Filament Group for this.

Aaaand there you have it! Sweet, easy and fast! Just the way we like it.

I read each and every comment, and look forward to see what you think! Also, this piece is part of the #ASKTHEINDUSTRY project, which is a distributed interview to the web industry: you ask, I’ll answer, or find someone who can! Drop a comment if there is anything I can help you with!