Remove Whitespace

Like (X)HTML and JavaScript, CSS can be optimized by removing whitespace. Spaces and tabs are commonly used to beautify CSS and make it more legible, but browsers ignore this excess formatting. You can save some bytes by eliminating spaces within declarations and around selectors separated by commas, and by eliminating returns. Make sure that you punctuate your declarations with semicolons, and quote any values with embedded spaces first to avoid any problems. So instead of this:

 body {      font-family: arial, helvetica, sans-serif;     font-size:1em; } 

Do this:

 body{font-family:arial,helvetica,sans-serif;font-size:1em} 

Even better, use the font shorthand property:

 body{font:1em arial,helvetica,sans-serif} 

We'll look at this CSS form of shorthand in the "Use Shorthand Properties" section later in this chapter.