Lightest way to format a CSS file

To "format" I mean how to write it. You can write CSS just as you want, there is no one right way. Here's how I think is the best and the lightest way.

Note: Ummm… don’t do anything this post says :) I was a fool back then. This is the time when I was muddling along without preprocessors and was too lazy to minify code with web app or such. Bottom line is: don’t make your own style, use convention that exists, like GitHub’s CSS Style Guide or such.

This is kinda the “official” and very readable:


.blog-header {
  background: #33FFCC; 
  height: 140px; 
  margin: 0 -20px 15px -20px;
  padding: 20px 20px 0 20px; 
  position: relative;
}

Problem is that you get really long CSS files. Though it’s readable, but finding anything from a mile long file gets tedious. Then there is this more compressed method. It’s not as readable of course but in time you will learn to read it as well as the upper mentioned spacious formatting. In this method, alphabetizing the values gets more imperative (I mean when the values are alphabetized it’s easier to locate them in a long queue).


.blog-header {background: #33FFCC; height: 140px; margin: 0 -20px 15px -20px; padding: 20px 20px 0 20px; position: relative;}

To make it even more readable, it is good to remove the space after the colon, then you can really see where one value ends and other begins. Besides it’s tiny bit smaller also :) If you want to get really compressed get rid of the space before the curly bracket.


.blog-header{background:#33FFCC; height:140px; margin:0 -20px 15px -20px; padding:20px 20px 0 20px; position:relative;}

When you look at code formatted this way with YSlow, it thinks it’a already compressed code!

  1. Win: shorter file, easier to find stuff.
  2. Win: smaller file size, page loads faster and ranks better in google.
  3. Win: save the trouble to compress you CSS file.

Club-Mate, the beverage → club-mate.fi