8 ways to optimise your CSS

We were working on a website which uses AMP (https://www.ampproject.org/) or Accelerated Mobile Pages recently, and with AMP there are a few interesting facts about CSS. It only supports embedded CSS, and can have a single style block in the DOM. The other interesting fact about it is that the CSS always had to be lesser than 50, 000 bytes. Thats like 400KB worth of CSS, and that would be approximately 350, 000 characters in the CSS. With this we had to use all sorts of ways to reduce the CSS file sizes, after searching for tips and tricks and finding our own methods of doing this we thought of sharing our finding in a blog post.

1. Nested CSS use carefully

Nesting CSS can add redundant code to your CSS file. If you take a navigation style for an example, and look at the following SCSS to style it. 

nav {
   ul {
     overflow: hidden;
     li {
       float: left; 
       margin: 0 5px;
       a {
         text-transform: uppercase;
         &:hover {
             color: red;
         }
       }
     }
   }
 }

By the look of this, it is a nice and clean, readable code. When you check the output of this once compiled it'd look like this

nav ul { overflow: hidden; }
nav ul li { float: left; margin: 0 5px; }
nav ul li a { text-transform: uppercase; }
nav ul li a:hover { color: red; }

And this is 147 Bytes. However if you want to optimise this, remove the redundant ul, and li declarations, so your compiled css will look like the following.

nav ul { overflow: hidden; }
nav li { float: left; margin: 0 5px; }
nav a { text-transform: uppercase; }
nav a:hover { color: red; }

This brings if down to 132 bytes, thats a 15 byte save right there in 4 lines of css, imagine a code which can have multiple nesting levels, and if thought about it carefully how much of it can be redundant

2. Usage of media queries

We noticed that media queries can be adding loads of junk to your code if you dont use them carefully. When using a CSS compiler like SCSS / SASS no matter the nestings you have you can have different media queries at any level of the nest, and the compiler would output working CSS code.

We realised that when using media queries you have to be very careful not to add multiple media query declatations. Lets take the previous example with a few media queries.

nav {
   ul {
     overflow: hidden;
     li {
       float: left; 
       margin: 0 5px;
       @media screen and (max-width: 768px) {
         float: none;
         margin: 5px;
       }
       a {
         text-transform: uppercase;
         @media screen and (max-width: 768px) {
             font-size: 120%;
         }
         &:hover {
           color: red;
         }
       }
     }
  }
}

The output of the above would be something like this.

nav ul {overflow: hidden;}
nav ul li { float: left; margin: 0 5px;}
@media screen and (max-width: 768px) { nav ul li { float: none; margin: 5px;}}
nav ul li a { text-transform: uppercase; }
@media screen and (max-width: 768px) { nav ul li a { font-size: 120%; } }
nav ul li a:hover { color: red; }

Now lets focus on another approach of writing this same SASS, like the following

nav {
   ul {
     overflow: hidden;
   }
   li {
     float: left;
     margin: 0 5px;
   }
   a {
     text-transform: uppercase;
     &:hover {
       color: red;
     }
   }
   @media screen and (max-width: 768px) {
     li {
       float: none;
       margin: 5px;
     }
     a {
       font-size: 120%; 
     }
   }
 }

The output of the above is the following

nav ul { overflow: hidden; } nav li { float: left; margin: 0 5px;} nav a { text-transform: uppercase; } nav a:hover { color: red;} @media screen and (max-width: 768px) { nav li { float: none; margin: 5px;} nav a { font-size: 120%; } }

This is a reduction from 297 Bytes to 234 Bytes, 63 Bytes.. thats very significant.

3. Targeting tags rather than class names ?

Using class names or IDs can be nicer in the code. However if you can use the tag itself to target the elements thats going to save a lot, most of the HTML tags are one of two characters, p, a, h1, h2, h3, h4 etc. And if you can use these in the CSS, than names given to these with classes will be saving you a lot.

4. Remove px / and none

If you use 0px at place for things like border:0px; or border: none; these could be always written was border: 0;. Another example is margin: 0px 50px; This can be written as margin: 0 50px;

5. Shorter class names 

This one explains itself. The shorter the class name is the bytes you are going to save is bigger. And if you are using nested SCSS then it is even bigger.

6. BEM can be a blocker 

If you are using BEM, you'd probably know what this is. In BEM syntaxs you use __ (two underscores) to specify an element, and -- (two dashes) to specify a modifier. Now think of the amount of times underscores and dashes are going to be repeated in your CSS. We are not against BEM, we use it for all our projects, however we have a norm of never combine string with these separators more than 3 levels.

7. No inline file embeds (64 bit encoded files)

Embedding files in your CSS is a way to eat up a lot of spaces, so force your CSS compilers not to embed things to it, but use than from their own files.

8. Combine your css

This is an interesting part. Try to combine your CSS as much as possible, and this removes the additional characters you have to type in.

font-family: arial;
 font-size: 16px;
 line-height: 24px;
 font-weight: 400;
 font-style: normal;

The above can be wirrten in to one line like this

font: normal 400 16px/24px arial;

There are a lot of other places where you can use them, borders, margins, paddings, etc.

We could bring down 100KBs worth of CSS down to 450KB, when we took these innitiatives, hope these would help you too