How can I stay organized when writing CSS? [duplicate]

Question

Possible Duplicate:
How to Manage CSS Explosion

One of the most difficult things I find is keeping my stylesheets organized. I usually start out with writing a small reset section. I then write the layout blocks, and continue progressively adding styles as I write my HTML blocks.

After the first two steps, though, everything turns into a mess. Styles get add, removed, forgotten, based on my whimsical HTML coding, which is changed often. I can't find a logical way to separate and classify my CSS.

I found myself creating separate sheets for the default style, the navigation, and the layout.

After I wrote my footer's CSS, I couldn't figure out if it should go into the default stylesheet, the navigation one, or the layout file. Its container was certainly part of the layout, its navigation menus were part navigation, but it had styles that should go into the basic stylesheet. I found myself thinking about seperating the CSS accordingly but that can't be right.

I can't find a logical way to organized my ideas into orderly classifications.

Can someone offer me any insight?

Answer 1

While its not a direct answer to your question, have you looked at less.js or its several serverside clones? Perhaps having less styling code would make it easier to organize.

Answer 2

Let's approach this from the angle of a new programmer who wants to make some changes to the layout of your website.

I'm not sure whether using a framework will make things better, more abstraction, more learning curve.

I think you are on the right track with your organization.

I usually create a default.css file which contains the markup for the default fonts, colors, link styles, etc. In this file, I treat the website if it were one big chunk of pretty formatted text with embedded pictures. No <div> tag styling here. Usually this means that a lot of the formatting for the content is in there. But not that special button on the news page, that one gets a news.css on it's own.

Usually websites can be divided into parts. Header, footer, sidebar, frontpage, newspage, agenda, etc. If for instance the footer needs to be red, it's nice to see a file footer.css which indeed contains the background color.

If the link style in the footer is the same as in the sidebar, put the style declarations in both files. If the link style in the footer is the same as the main body text, it gets placed in default.css. Try to make sure it is in the first place you'd look as a new developer.