Get the most out of your CSS

January 31, 2015

Here's a quick few tips on how to cram your CSS files as you type. This is prompted after my discussion with @ben_eb on Twitter.

In fact, this post should probably be called 'get the least out of your CSS'.

Here's some music from CSS to go with this post.

Tips

There's loads of little ways you can squeeze the bytes out of your CSS. It might seem pointless to do these tricks, but by trimming bytes  here and there the filesavings add up. Like my mother always says - look after the bytes, and the kilobytes will look after themselves. Well, maybe not. But still.

Hex Code

You can shorten most hex codes - why type #000000 when #000 does the same thing? #112233 can also be squished to #123. Some hexes can't be squished, like #bada55.

The same thing applies to colour names - avoid using names. Why 'black' when you could use #000?

If you're not a robot and using hexes confuses when compared to colour names, then use Sass to fill in that blank. Example:

$white: #fff;

.thing {
  color: $white;
}

0 not None

When typing 'border: none;', use 'border: 0;' instead. Does the same thing in a quarter of the size. You can apply this to a lot of things.

Drop the 0 on a point

Instead of '0.4' when using opacity (or shadows), just use '.4'. Simple.

Margin

  • Instead of margin: 0 0 0 0; do margin: 0;.
  • Instead of margin: 45px 0 0 0; do margin: 45px 0 0;.
  • Instead of margin: 45px 0 45px 0; do margin: 45px 0;

Most of these are obvious but the middle one I always forgot to do. Sass Lint (see below) helps with that.

Got more tips to share? Get in touch!

Sass Lint

I learned most of these shorthands through the Scss-lint plugin for Sublime Text. It warns you in places where you could make your Sass more sane by providing an interface to the gem scss-lint. Try it out.

It'll also direct you to merge your selectors and make your code easier to read.

Compress your CSS

You can try all the methods above, but if you're still delivering a non-minified CSS file you're not getting the most out of your CSS.

I started originally by using the default Sass/Compass minifier included. This simply squishes the file down, removing the whitespace and comments - which certainly helps!

Then I moved onto gulp-css-minify (uses clean-css) when I started using Gulp. It provides the same as above, removing whitespace, comments, and other bits.

CSSO

But now, the crown jewel is CSSO. I use it through the gulp-csso plugin. Not only does it perform standard compression, it also makes the changes I said above - squishing your hex codes, turning 'none' into 0, decimal points, and a lot more.

If you're using Wordpress, you need to keep the first comment for the Theme. Make sure CSSO doesn't remove it by adding a ! to the first opening block, like: /*!.

But it can also be turned up a notch with Structural Optimisations. It can merge similar selectors, split blocks up, and make decisions on what will save filesize. On an average CSS file, it saved 10% when compared to other minifiers. Bonkers. Go out and give it a try in your browser.

Bear in mind that with Structural Optimisations on, it's moving your selectors around. It shouldn't do anything crazy, but it may affect the way your CSS renders. Be sure to test and keep an eye on the output.


Hopefully these quick tips will give you some pointers on how to save bits and bytes in your CSS. Every saving helps.