Tips of optimizing CSS for better performance

For creating a better user interface, CSS plays very important role in terms of presentation. Here are some tips to optimize the CSS for better performance.

Tip #1: Reduce the number of HTTP requests made for image resources.
Reducing the number of HTTP requests has the biggest impact on reducing response time and is the easiest way to improve performance.

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used.

Tip #2: Use shorthand properties to optimize your CSS (including font, background, margin, and border).
Rather than declaring all CSS properties and increasing the size of CSS file, it’s good practice to use shorthand properties to group properties of a common set eg (font, padding, margin)

Like instead of writing
margin-left:5px;
margin-top:3px;
margin-right:4px;
margin-bottom:5px;

We can write
margin:3px 4px 5px 5px;

Tip #3: Use shorthand hexadecimal colors or names, whichever is shorter.

Rather than writing #ffffff we can write #fff
Similarly #ff3366 can be written as #f36

Tip #4: Group selectors with the same declarations
CSS allows you to group multiple selectors that share the same declaration. This optimization technique allows you to apply the same style to multiple elements to save space.

So
div#main {border:1px solid #ece;}
div#sidebar {border:1px solid #ece;}

Becomes this:

dive#main, div#sidebar {
border:1px solid #ece;
}

Tip #5: Group declaration with the same selectors
CSS allows you to group multiple declarations for the same selector into one rule set, separated by semicolons. This allows you to apply multiple declarations to one selector to save space.

So

body {font-size: 1em;}
#mainContainer {font-family: arial, helvetica, sans-serif;}
#mainContainer {color:#000000;}
#mainContainer {background:#ffffff;}

Can be written as

#mainContainer {
font-size: 1em;
font-family: arial, helvetica, sans-serif;
color: #000000;
background: #ffffff;
}