Menu icon Foundation
Optimizing for Critical CSS

I would like to optimize a Foundation5 project by including critical path css in my templates. I am using the recommended sass installation, and modify app.scss to import on the components a project needs. My question is how to take this one step further by removing critical path classes / elements from being compiled to stylesheets.css.

An easy example would be the column class. This is a no-brainer for critical css, but many other grid classes are not. I'm unsure of how to selectively exclude classes in this manner. Would I need to edit the mixins?

csscritical cssapp.scss

I would like to optimize a Foundation5 project by including critical path css in my templates. I am using the recommended sass installation, and modify app.scss to import on the components a project needs. My question is how to take this one step further by removing critical path classes / elements from being compiled to stylesheets.css.

An easy example would be the column class. This is a no-brainer for critical css, but many other grid classes are not. I'm unsure of how to selectively exclude classes in this manner. Would I need to edit the mixins?

Marko A about 4 years ago

IMO this shouldn't be something to do by hand for every project. It's just not worth human time to do that.

You can let uncss remove unused css.
https://github.com/giakki/uncss

I think this will be added to grunt in foundation 6. Or gulp, whatever they will use.

Wesley Picotte about 4 years ago

I agree somewhat -- every project is unique so critical CSS will change. When rationale exists to make this extra step towards optimized performance, it's totally worthwhile.

Thanks for the uncss reference. I've asked about this previously--specifically, how to integrate it into an existing or future F5 sass install. I'm not sure, but assume compass should also be pulled into the grunt / gulp file. Thoughts?

Fingers crossed that it is included in F6 -- seems reasonable for any framework solution.

Rafi Benkual about 4 years ago

We are including UnCSS into the advanced version of Foundation Sites 6. With UnCSS you have to make sure that some classes are never removed that are added by JS. In Foundation Sites 6 this will be easier because the JS is not adding lots of markup.