best practice for stylesheet layout

[JMouse]

How do you all lay out your stylesheets? Is there a 'best practice' way to do it?

personally, I would lay out each element as follows:

selector {
____property1: xxxx;
____property2: xxxx;
____}

(_ used to denote tab or 4 spaces)
but I notice that people also put everything on one line, and embed a great deal in the html, where I would put everything externally wherever possible.
Certainly my way means that stylesheets get very long, and you have to keep switching and saving while developing.

I also comment everything like mad.

Am I making a rod for my own back, or being prudent?

[AutisticCuckoo]

I prefer to put one rule on one line, and I indent rules to indicate structural relations (makes it easier to find things later).

selector {property1:xxx; property2:xxx}
  selector subselector {property1:xxx; property2:xxx}

Just a matter of taste, though. I'm not claiming that this is a 'best practice' or anything. It works for me 's all.

Oh, and I also use a standard 'order' for my properties.

[JMouse]

I like the idea of indenting. I think I'll do that in future.

[Kravvitz]

I find it rather difficult to read some CSS rules that are all on one line.

I prefer two or three space indentations. Like this:

h1,h2 {
  color: #000;
  margin: 0;
  padding: .5em;
}

[Tyssen]

I do either/or depending on how many rules are applied to each element.

[AutisticCuckoo]

I find it rather difficult to read some CSS rules that are all on one line.

It doesn't work very well unless you have an editor with syntax highlighting, i.e., colour-coding the CSS.

[Kravvitz]

Huh? What doesn't work very well? Am I correct in assuming that you mean that you find it difficult to read multi-line rules in a text editor without syntax highlighting?

My main text editor does have syntax highlighting, which is helpful, but I still find it easier to read multi-line rules even in a text editor that does not have syntax highlighting.

[AutisticCuckoo]

Sorry for being unclear (for the second time today!)

I mean that my method doesn't work well without colour-coding. You also need a high-resolution monitor.

The main reason I'm not too fond of the multi-line version is that it takes up so much vertical space. Sometimes you want to keep an eye on one rule while editing another, and that's difficult if you can't keep both in sight at the same time.

[Sergeant]

I would go for this style:

selector {
     property:value;
     property:value;
     property:value;
     property:value;
}

[Tailslide]

I'm odd - I like rules all on one line in general.

[Kravvitz]

Ah! That makes so much more sense now. Thanks for clarifying, Tommy.

Sometimes when I want to refer to a rule or two while writing another, I will copy-and-paste them into another text editor window so that I can see them all at the same time.

[fisherboy]

For me, the simpler and clearer it is, the better. I like to be able to scan down the left-hand side for the selectors, then have all the properties indented on their own lines (a la Kravvitz and sergeant).
The reason for this is that I can't read CSS quickly (my understanding just isn't that great) So my comprehension speed goes up along with the length of the sheet.

Simplicity rules!

[Egor]

a {
  property: value;
  property: value;
}

a,
b {
  property: value;
  property: value;
}

  b c {
    property: value;
  }

I don't think there's a wrong way to format your styles. What's really important is grouping, using short-hands where ever possible and being consistent with the order of properties.

[fisherboy]

a {
  property: value;
  property: value;
}

a,
b {
  property: value;
  property: value;
}

  b c {
    property: value;
  }

I don't think there's a wrong way to format your styles. What's really important is grouping and using short-hands where ever possible, and being consistent with the order of properties.

Nicely said Egor.

[blain]

Being a stickler for neat code I opt for

body
     {
     color: #fff;
     }

[KiwiJohn]

A related question.

How do you list/group your styles?

Alphabetically?
By type (html tags in one group, classes in another group, ids in another)?
By id (i.e. all styles within an id are grouped together)?
Other?

Do you separate positioning/layout from the rest?

What method do you find gives you the best control over where to find what you're looking for?

[Tyssen]

I do html, body and container first. Then usually I have my structural elements together and text styles that apply to all pages. Then I group styles together by individual page.

[AutisticCuckoo]

Element type selectors first (alphabetical order).
Classes next (alphabetical order).
IDs last (structural order with indention).