Complex CSS files can often be difficult to manage especially if you don’t use a structured way to write and organize their code. In a previous post I already illustrated a methodic approach to CSS coding.
This post illustrates five simple practical rules that can help you write well structured and more readable CSS files to make your developer life easier.

I also suggest you to download my CSS2 Visual Cheat Sheet, a practical and essential reference guide to all CSS2 properties with detailed descriptions and some example of code.

1. Order CSS properties alphabetically

When you start adding properties to a CSS element, probably you don’t pay attention to the order you are using to list them. Without doubt, a better approach to proceed is to use alphabetical order like in the following example:

#nav{
    border: solid 1px #DEDEDE;
    color: #000;
    padding: 10px;
    width: 650px;
}

In this way, if you need to change a specific properties, will be simpler to find it at a glance.

2. Indent child elements

Indenting child elements of a main element (in this example #nav) is a good way to highlight dependencies between related portions of code. 

#nav{
    width:650px;
}
    #nav ul li{
        float:left;
    }
        #nav ul li a{
            display:block;
        }

3. Use comments to separate logical sections of code

Comment lines are really useful to improve code readability because, if used with certain criteria (and not abused), can help you separate sections of CSS code related to the structure of the HTML document:

/*-------------------
HEADER 
------------------- */
#header{width:650px;}
    #header a:link, 
    #header a:visited{
        color:#0033CC;
    }

/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
    #nav ul li{
        float:left;
        padding:0 10px;
}

4. Use extra spaces and tabulations to separate single properties from their values

I think this way to organize CSS code, by using tabulations to separate properties from their values, noticeably improves the readability of CSS files but in general is rarely used:

#main{
    width: 650px;
}
    #main h1{
        color:          #000;
        font-size:      22px;
        font-weight:    bold;
    }
    #main p{
        color:          #000;
        font-size:      12px;
        padding:        10px;
    }

5. Group elements with the same properties

If you have a group of element with the same properties and values you can think to group them in a single declaration and manage separately their difference in order to optimize your code. For example take a look at the code below:

.icon-facebook {
   background:url(facebook.gif);
    padding-left:  26px;
    margin-right:  20px;
    width:        100px;
}
.icon-twitter {
   background:url(twitter.gif);
    padding-left:  26px;
    margin-right:  20px;
    width:        100px;
}
.icon-delicious {
   background:url(delicious.gif);
    padding-left:  26px;
    margin-right:  20px;
    width:        100px;
}

You can improve the previous code in this way:

.icon-facebook,
.icon-twitter,
.icon-delicious {
    padding-left:  26px;
    margin-right:  20px;
    width:        100px;
}
.icon-facebook{background:url(facebook.gif);}
.icon-twitter{background:url(twitter.gif);}
.icon-delicious{background:url(delicious.gif);}

Conclusion

When your project is ready to go live, I suggest you to create and publish a lightweight version the CSS file by using a CSS compressor (such as http://www.csscompressor.com/ or http://www.cssoptimiser.com/) that allows you to reduce dramatically the size of your CSS files.

If you have suggestions or other “rules” you use to improve the readability of your CSS files, please leave a comment. Thanks!