Top 7 Tip for Optimizing CSS

CSS is very important component for design and layout of web pages. These includes all the syles like colors, size, position, backgrounds, fonts etc. to enrich the look and feel of you pages, but it is very easy for CSS to grow to a huge size if you are not following proper guidelines to optimize this. By doing so you are not only making you css cleaner but also decreasing the response size of file. Here are some tip for optimizing the CSS:

1. Aggregate Multiple Properties

Combine multiple properties. For example

for margin, instead of

margin-top: 8px;
margin-right: 4px;
margin-bottom: 8px;
margin-left: 4px;

you can use

margin: 8px 4px 8px 4px;

for font instead of

font-family: Tahoma;
font-weight: bold;
font-style: italic;
font-size: 12px;

you can use

font: italic bold 12px Tahoma;

for background instead of

background-image: url(bk_main.jpg);
background-repeat: repeat-x;
background-color: #ccccff;

you can use

background: #ccccff url(bk_main.jpg) repeat-x;

2. Group Common Styles

If you are having something like below where two element share some common properties

H2
{
    font-size: 16pt;
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

H3
{
    font-size: 14pt;
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

Then you can share their common properties like below

H2, H3
{
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

H2
{
    font-size: 16pt;
}

H3
{
    font-size: 14pt;
}

3. Use Shorthand Hexadecimal for Simple Colors

You can also specify simple colors using shorthand color names. For example

#99ff33 can be replace with #9f3
#ff0000 can be replace with #f00
#000000 can be replace with #000

4. Use Classes in Parent Elements

You may specify element style in the parent control. Instead of using

<p class="myClass">Home</p>
<p class="myClass">About</p>
<p class="myClass">Contact</p>
<p class="myClass">Sitemap</p>

you may also do this

<div class="myClass">
    <p>Home</p>
    <p>About</p>
    <p>Contact</p>
    <p>Sitemap</p>
<div>

5. Don't Use Giddy Comments

The below comment

/*****************************/
/**********Header CSS*********/
/*****************************/

can also simply written as

/*Header CSS*/

6. Never Attach Style to Elements

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

<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Home</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">About</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Contact</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Sitemap</p>

use

<p class="myClass">Home</p>
<p class="myClass">About</p>
<p class="myClass">Contact</p>
<p class="myClass">Sitemap</p>

7. Remove Extra White Spaces and Line breaks

For decreasing the file size you can remove the extra white spaces and lines breaks between styles.

Discussion