Css opimization is very important to bring it into a shape so that it doesn't bloat or become over weighted. This optimization can be optimized by taking some precautions while coding CSS let us discuss some those steps in brief here...

1) Grouping Selectors

Many times while writing CSS, when we are not aware of overall picture of what we are going to do (or) what actually we want, REDUNDANCY of code arises. different selectors will have same css code. So, try to avoid it by grouping selectors of same styling.

Here is an example

Un-Optimized CSS Code

In this example, you will see the same properties within 3 different selectors.

Optimized CSS Code
You can optimize the above css by grouping selectors that have the same properties. Each selector should be separated with a comma, see below for an example:

h2, p, .block {
font-size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 url(crown.gif) no-repeat 5px 10px;
}

2) Using Shorthand CSS

The multiple style rules of this example:

h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}

may be rewritten with a single shorthand property:

h1 { font: bold 12pt/14pt Helvetica }

3) Reduce Number of Line Breaks

It is self explinatory, what you need to do is do not use enter after Semicolon(;). Gave a sample below.

h2 {
font-family:verdana;
padding:0;
margin:5px 0;
color:#333;
text-decoration:underline;
}

/* you can do it like this */
h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline;}

4) Remove Last Semicolon

After you use the above hint, this is adds much more to it.... what you need to do is, do not use semicolon for last styling. A sample below.

h2 {font-family:verdana;color:#333;}

/* removed */
h2 {font-family:verdana;color:#333}

5) Use Simple Comments

comments should be simple instead of complex ones.... let it be in single line..!

/************************************/
/* Content Page */
/************************************/

vs

/* content page */

6) Use Simple Color Codes

Instead of using full color code like this: #FFFFFF, #113344, #AABBCC, #FF0000

We can do it like this: #FFF, #134, #ABC, #F00

However, we won't able to change anything like this: #C4C4C4, #1A2B3C

7) Remove "px"

Very general approach while mentioning heights, widths, font sizes and so on... is to use px after the vale like:
h2 {padding:0px; margin:0px;}

But use it like this:
/* removed */
h2 {padding:0; margin:0}

8) Remove unused classes

During the development, due to the design changes, some of the classes that we have created might not in use. Sometimes, we just have to skim through the CSS code, and identify them and clean up the code.

Dust-Me Selector is a Firefox extension that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.

9) Use Classes in Parent Elements

You may specify element style in the parent control.

Instead of using

<p class="myClass">Home</>
<p class="myClass">About us</>
<p class="myClass">Contatc us</>

you may also do this

<div class="myClass">
   <p>Home</p>
   <p>About us</p>
   <p>Contatc us</p> 
<div>

10) Never attach style to HTML Elements

Always specify styles in CSS. Don't add styles directly to elements.