How to order properties in a declaration block?

Question

I know there's no real right or wrong answer. I'd just like to hear from CSS developers how you like to order your properties and what is your reasoning behind your preference. Thank you very much.

Answer 1

Personally I try to group properties more or less like so:

• box model (height, width, padding, margin...)
• positioning
• font related (font-family, font-weight, etc)
• colours and background images

There's no real benefit to doing things this way, I just find it reasonably logical and easy to follow.

Quick example (with comments to illustrate):

#selector{
    /* box */
    width: 300px;
    margin: 15px 0 30px;
    padding: 5px;
    border: 1px solid #333;

    /* position */
    float: left;
    display: inline;

    /* font */
    font-family: 'Lucida Grande', 'BitStream Vera Sans', Verdana, sans-serif;
    font-weight: normal;
    font-size: 14px;

    /* colour */
    color: #000;
    background: #ddd;
}

It's worth noting I usually keep the grouped selectors on one line (i.e. all box-related selectors on one line, and so on)

Answer 2

Check out Andy Ford's post which details his approach to ordering CSS properties. He ends it up with a nice round-up of further reading around the internet on the topic.