CODEWITHSUNDEEP
cssproperties
Freesnöw
Freesnöw

Reputation: 32143

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 accepted 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.

Upvotes: 1

Views: 170

Answers (4)

tahdhaze09
tahdhaze09

Reputation: 2213

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.

Upvotes: 1

Mark Holland
Mark Holland

Reputation: 846

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

Upvotes: 1

phihag
phihag

Reputation: 287885

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.

Upvotes: 1

Radu
Radu

Reputation: 8699

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.

Upvotes: 2

Related Questions