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.

16 comment(S)


latish on Oct 6, 2008 09:55 AM

Nice article. You should also clean your CSS regularly by removing unused classes.
http://www.dotnetsur....rWebApplication.aspx

Mike Shannon on Oct 6, 2008 10:22 AM

Good tips. You can also use descendant and child selectors to better control specific portions of HTML and without creating a lot of extra markup on the web page.

/* Descendant selector, any "a" tags within the "p" tag are red */
p.myclass a {
color: red;
}

/* Descendant selector, any "a" tags directly under the "p" tag are red but other "a" tags further down are not affected */
p.myclass > a {
color: red;
}

Amit Chawla on Mar 13, 2009 02:34 AM

Nice Article...

I appreciate that coz most of the software developers just try to do optimization in DataBases..

But it seems to be the good thing coz every thing your software is rendering consumes much time..

Software Means Web Site..

poker hand rankings on Mar 25, 2009 01:40 AM

i found this informative and interesting blog so i think so its very useful
and knowledge able.it is Very good info.thanks for the nice post.so i appreciate to your efforts.I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own word press blog now.

Trif Mircea on Apr 11, 2009 08:05 AM

Another thing that i find useful is Organizing your css to indent child items further than the rest. This allows you to more easily recognize page structure within your CSS and how elements relate to each other.

Trif Mircea on Apr 11, 2009 08:05 AM

Another thing that i find useful is Organizing your css to indent child items further than the rest. This allows you to more easily recognize page structure within your CSS and how elements relate to each other.

San Diego Web Designer on Aug 17, 2009 08:11 AM

Thanks for the great post. Also, helpful to create classes for images, such as routine borders and margins.

dghfgjhgfj on Aug 28, 2009 06:56 AM


muzaffar on Oct 2, 2009 01:09 PM

who are you iam fine

sponsored

Ashley on Jan 10, 2010 07:24 AM

I didn't even know you could shorthand CSS so a very informational article, but does not optimizing your CSS code really effect anything much? Wouldn't really effect rankings unless the file was so enormous that it caused a slow loading time. It seems like it's much harder to read through the CSS files to find things when it's not completely laid out.

Sara on Nov 21, 2010 07:03 PM

Hi, i'm new to this site. how could i add in this site. thank u.

Webnoos on May 6, 2011 02:11 PM

Really Good Tip, Definitely Will Implement it, Thanks Man

Ashwin on May 9, 2011 05:49 AM

Nice tip. thanks.
like it.

Andrew Lundgren on May 26, 2011 04:54 AM

If you're using ASP.Net, then you can use a free control called StyleManager which will do all of this CSS minification automatically. It will also combine your stylesheets into one aggregated stylesheet, to reduce HTTP requests.

Here's what it does for minification:
http://www.gstyleman....ication-Process.aspx

I've used it on many sites, and it's worked great for me.

Nikhil Gupta on Jun 10, 2013 05:30 AM

Really useful and valid points for performance improvement

Leave a comment