Smaller files download faster than larger files. Faster websites make people happier than slower websites. So it's a no-brainer that smaller CSS files translate to a better user experience — extra bytes add up fast.

Now, Foundation comes with many options, add-ons and settings. A full install of Foundation 5.4 CSS from Sass, with all the trimmings, weight 304 KB. That's pretty dang big. Luckily, few projects need everything that Foundation offers. Today we're going to look at getting that number down.

1. Disable items you don't need in _app.scss.

Accordion, breadcrumbs, forms, clearing, pagination, switches — Foundation 5.4 offers 35 unique components that your site may, or may not, need. Don't need tabs, tables or the top bar? Then don't add them to your CSS.

Foundation with Sass comes with a file called _app.scss. You can use that to determine which components load into your production CSS file.

 

Above: Everything turned off except for forms. In this example, we only want Foundation forms. The result is drastic: the CSS file drops from 304,000 KB to 35 KB.

2. Enable the right includes

You control which components load with app.scss. But _settings.scss is responsible for loading extra code those components need.

$include-html-classes is a Sass variable that toggles the generation of the presentational classes for a component.

This adds many lines of code to your CSS file, whether your components need them or not. We're going to turn that off, then include only the parts that your components need.

Start by setting it to "false".

$include-html-classes: false;

Then go through the components you need in _settings.scss, and turn on the "include" variables for the components you need. For example, if you're using Foundation forms:

$include-html-form-classes: true;

In Foundation 5.4, that will save about 19kb. Not a bad start. But bear in mind that turning off $include-html-classes turns off everything, including the popular typography styles.

Some components do better. Let's say your site uses the Top Bar, which weighs a whopping 126kb. Two changes:

$include-html-classes: false;
$include-html-top-bar-classes: true;

… and the CSS file goes from 126kb to about 30kb. That's great, but should be done with care. The top bar needs the presentational classes to work properly. This leads to the rule of thumb: You should simplify your code as much as possible, but not more than necessary. (Corollary: test often. Then test again.)

But in general, turning off extras in Foundation can make significant savings with little effort on your part. But we can do a little more. I mean, less.

3. Minify CSS for production

We need spacing and returns in our CSS to debug and maintain it. Computers, however, do not. Minifying code removes extra spaces, all hard returns and comments — ideal for production files.

In the command line, run:

sass --scss -t compressed path/to/your.scss path/to/output.css

And if you're using the CSS version of Foundation, run your CSS through a minifier service or plugin to reduce your file size — we've seen savings up to 65%. And anything we can do to reduce file size makes for better, faster-loading products.

---