5 Rules To Write More Readable CSS Files

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;
    }

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);}