5 Ways to Shrink Your Stylesheets

Jordan Brennan's photo
Jordan Brennan
·

4 min read

The smaller the file, the faster the download.

The faster the download, the sooner the browser can evaluate.

The sooner evaluation finishes, the better the user experience.

The following five techniques will help make your stylesheets smaller. The first three are fairly well-known and hopefully your site is already using them. The last two are not common practice yet, but they will be, so use them now and impress your boss😎

1. Use Lightning CSS to minify your stylesheet

npm install --save-dev lightningcss-cli

lightningcss --minify --output-file min.css styles.css

I've got the smallest file sizes from Lightning CSS and the second smallest from CSS Optimize. cssnano is another popular choice. All three are good, but they do vary in options, so you may need to double-check to ensure its features meet your needs.

2. Use file compression

Compressing the stylesheet will make your file even smaller. The best choices are gzip and Brotli, with Brotli producing slightly smaller files.

Compressing your stylesheet can be done manually, but a better option is to have your build system do it automatically for you. What's even better than that, is to use a CDN service like unpkg or jsDelivr or AWS CloudFront that does all the work for you. Just publish your stylesheet and the CDN will compress it.

3. Use caching

When a file is cached by the browser it will no longer be downloaded over the network. As you can imagine, this makes pages load much faster. Unlike the other four techniques, caching does not technically make a stylesheet smaller. Conceptually though, a cached stylesheet has a size of zero. No amount of minification or compression can "shrink" a file like caching!

There are two ways to cache:

  • Cache Control A CDN or your own web server can set a special HTTP header called Cache-Control that tells the browser to save the response, i.e. save the stylesheet file. The cache control header has several options called "directives" that you can use to tune the caching strategy. MDN is a good place to learn about the details, but for now just know that max-age=<seconds> is the primary directive. That's how the server tells the browser to save the file and for how long. Cache control with max age replaced the older Expires.

  • Service Worker Your page can include a Service Worker script where requests for things like stylesheets can be intercepted with JavaScript. This script can watch for requests for a stylesheet and cache the response for future use. What's really interesting about using a Service Worker is all of your website's files can be cached and made to work during times when the network is slow or even when the device is offline. Powerful stuff!

4. Use :is() psuedo class

This CSS feature has been supported by browsers for a few years now. It provides for a more concise way of writing selectors. For example, let's say your design makes icons in headings a slightly lighter color than the text:

/* BEFORE */
h1 .icon,
h2 .icon,
h3 .icon,
h4 .icon,
h5 .icon,
h6 .icon {
  color: #333;
}

/* AFTER */
:is(h1, h2, h3, h4, h5, h6) .icon {
  color: #333;
}

That's 20 fewer characters, which isn't much smaller, but when you have 100s or 1000s of lines of CSS, like in a design system, there are dozens and dozens of opportunities for consolidating with :is(). MDN has an example that shows how extreme some savings can be. It definitely adds up. I've personally seen stylesheets shed 10% of their size just with this slight change in syntax.

5. Use native nesting syntax

Firefox recently shipped support for CSS nesting, which now makes the feature safe for production use.

CSS nesting is very similar to the nesting feature you've likely seen in SASS and other CSS preprocessors. Like :is(), nesting enables you to write less code. In fact, there are cases where nesting is even better. Using the example above:

/* BEFORE */
:is(h1, h2, h3, h4, h5, h6) .icon {
  color: #333;
}

/* AFTER */
h1, h2, h3, h4, h5, h6 {
  & .icon {
    color: #333;
  }
}

That's two characters less than :is() and 22 compared to the original. I recently refactored styles in Mdash to use nesting syntax (see the diff) and it resulted in a big reduction in the final stylesheet size.

It's worth it!

Smaller files make faster websites and faster websites make happy users (and in the case of e-commerce, more money). So take the time to shrink your stylesheets.

Know some other techniques? Share them in the comments!

CSSWeb Developmentperformance