How do you organize your CSS?

[mellowyellow]

I'm not an organized person usually - but I'm trying to get there!

So here's a question for you gurus and org freaks out there. How do you organize your CSS?

I have done it usually in sections. For instance, outlining by /* HEADER */, /* FOOTER */, /* LINKS*/, and so on. But one thing I've always done is to only have every style definition once. That is, if there's a div.something, I'll only define properties for div.something in one area.

It's occurred to me that structurally organizing might be better. That is, have a /* LAYOUT */ section, and a /* STYLES */ section. In the layout section, you define the size and margins and floats of div.something. In the /* STYLES */ section, you define the colors and so on.

But this strikes me as a potential well for confusion. What if you accidentally have two different specifications for div.something's color, or padding, for example? It can make it hard to track down problems that result from it. Especially if you take it one step further and separate your CSS into different files, although I suppose that would be the super-modular approach.

Thoughts?

[Jason]

I usually try to do something like this.



/*
* Layout
*/
body { one:; two:; three:; }
#container {
one:;
two:;
three:;
four:;
}
/* End */


Basically I use a 3 line commend to specify what the CSS relates to. Then a single line comment to symbolise the end of the section.

If an attribute has less than 3 styles I keep it on one line. If it has 3 or more I break it up. I use single lines for small statements as imo it makes a stylesheet easier to read as you have less to scroll.

For my latest project I am trying something different. I am using PHP.

Each section is its own separate file.

layout.css
typography.css
form.css

I then have my main CSS file.

style.php

I then use PHP to combine the files and minimise them. I prefer this way the most. Makes it super easy to manage.