Ordering CSS properties

I have the following CSS:

body 
{ 
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    background-image: url("../images/tile.png");
    background-repeat: repeat;
    background-attachment: fixed;
}

#mbody
{
    width:80%;
    border-style:solid;
    border-width:2px;
    margin-left:10%;
    margin-top:50px;
    margin-bottom:10%;
    background-color:white;
 }

Is there a generally acc开发者_JAVA百科epted method to order the properties? Alphabetical? Grouped by purpose? Currently I kind of just add them onto the end when I think to add them. I feel like a bad person by doing this.

I prefer alphabetical. The other thing you should do it to add vendor specific attributes before the standard ones so that if available your elements get styled according to the standard. Also, consider combining compatible properties together.

Use margin:none instead of:

margin-left:0px;
margin-right:0px;
margin-bottom:0px;
margin-top:0px;

And the same goes for the background properties.

The order of properties does not matter, but you generally should order them by purpose. Also, feel free to use short forms like margin: 50px 0 10% 10% instead of 4 margin-* rules.

If you're thinking about ordering properties alphabetically, it is probably time to split up your classes, and define properties common in multiple classes in one class or rule.

It doesn't matter in the least. Just remember to run the file through a YUI compressor before you put it into production.

Think of a clock...

Start at 12:00, then 3:00, 6:00, 9:00. Up, right, bottom, left is usually how I list properties.

I believe using some of the new CSS3 properties like border-radius, you have to list them in that order.