In my 8 years of web development experience, I believe resources are money. If we are using fewer resources, it means we are saving money.

Website User Interface (UI) depends on CSS. Best CSS code means less space, easy to render and minimize the server resources.

I am sharing best CSS optimization techniques which I gathered from my experience and difference resources.

1.    Combine All CSS Files:

To minimize the http requests combine all CSS files. Actually, browser sends http request for one CSS file. If a website has more than one CSS file then browser will send requests according to the number of CSS files.

Before


<link rel="stylesheet" type="text/css" href="Boostrap.css" />
<link rel="stylesheet" type="text/css" href="slider.css" />
<link rel="stylesheet" type="text/css" href="datepicker.css" />

After


<link rel="stylesheet" type="text/css" href="styles.css" />

2.    Minimize CSS File:

Remove extra spaces from your CSS file.

Before


.floatLeft{ flaot: left}
.floatRight{ flaot: right}

After


.floatLeft{ flaot: left}.floatRight{ flaot: right}

3.    Always put CSS file in head tag on top and JAVASCRIPT in bottom:

Put CSS file in top of the website page and javascript in the bottom of page

Before


<link rel="stylesheet" type="text/css" href="Boostrap.css" />
<javascript src="boostrap.js"></script>
<link rel="stylesheet" type="text/css" href="slider.css" />
<javascript src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
<head>
<style>
...
</style>
<script>
...
</script>
</head>

After


<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

4.    User Link Tag instead of @import:

Detail Testing and analysis from this link: indicates using @import can affect the performance of your  
Website. The result of the analysis

5.    Group Same Properties Settings (shorthand):

Group same properties to reduce number of lines / spaces to make optimize code.

Before


margin-top: 5px;
margin-bottom: 10px;
margin-left: 8px;
margin-right: 20px
padding-top: 5px;
padding-bottom: 10px;
padding-left: 8px;
padding-right: 20px

After


margin: 5 20 10 8;
padding: 5 20 10 8;

6.    Group Similar Styles:

Group similar styles to reduce number of lines / spaces to make optimize code.

Before


h1 {margin:5 0; font-family: arial; font-weight: bold;}
#container1 .heading  {margin:5 0; font-family: arial; font-weight: bold;}
#container2 .heading  {margin:5 0; font-family: arial; font-weight: bold;}

After


h1, #container1 .heading, #container2 .heading  {margin:5 0; font-family: arial; font-weight: bold;}

7.    Use CSS Sprite Image:

Combine number of background/icons images into single image to reduce number of http requests and page size.

css sprites image
css sprites image

8.    Make CSS / Javascript as an external file:

Inline CSS style can reduce number of http request but it increase page size and same scenario of Javascript code.
If put inline CSS style and javascript inline code into a separate file then it will be easy to maintain and
read. It will be a good practice to increase and optimize website performance.

9.    Reduce the Number of Style Properties:

Remove white space from style properties

Before


div {
float: left;
width: 100;
height: 100;
background-color: black;
color: white;
}

After


div {float: left; width: 100; height: 100; background-color: black; color: white;}

10.    Remove Semicolon from last of style properties:

If style has single or difference property(s) then remove semicolon from end of style’s property.

Before


H1 {color: white;}

After


H1 {color: white}

11.    Remove decorated comments:

Before


/************************************/
/* Comment Area */
/************************************/

After


/* Comment Area */

12.    User HTML color Code (Hex Color):

Before


#colorCode {color: rgb(111, 129, 200);}

After


#colorCode {color: #CF0000;}

13.    Remove Pixel “px” from style properties:

Before


p {padding:0px; margin:0px;}

After


p {padding:0; margin:0}

14.    Remove unused Classes and IDs:

Remove all unused classes and Ids from css file.

15.    Reuse Classes:

Create reusable classes. If you are using same class in difference area then create that class and call. For example, if you are using “float: left” or “float: right” class in different class then create them separately i.e.
.floatLeft{float: left} .floatRight{float: right}

16.    Document Your Code:

If code is fully documented then easy to remove unused code because passage of time developer forget why style code written for. For good practice, add short comment for CSS style or block of CSS style.

Reference Links:
http://www.queness.com/post/588/15-ways-to-optimize-css-and-reduce-css-file-size
http://designshack.net/articles/css/18-css-compression-tools-and-techniques/
http://blog.monitor.us/2013/05/in-review-by-cc-top-10-ways-to-optimize-css-for-faster-websites/