Question

Possible Duplicate:
How to Manage CSS Explosion

I intended to build my web site with consistent styles and a coherent CSS scheme. But styles have crept out of control as I fine-tune individual pages (especially the main search form).

I’ve already gone through the process one time of breaking down the styles and rebuilding almost from scratch, and now it looks like time to do that again. How can I be efficient about this? I’m looking for a methodology, not a software utility (though I’m open to suggestions there…unless they cost money…).

Added note: I’m using a CSS framework and it’s difficult to keep padding and margin coordinated.

Added note 2: The initial responses to this post are about best practices for CSS. Let’s assume I already tried to follow best practices (in fact, I did). Now it’s the clean-up procedure I’m looking for.

Added note 3: As of 14 June, combining this response (which I just found) with my post below is possibly a comprehensive answer.

Closure notes:

I learned my question is too general, and for that reason I wish I hadn’t posted it. (Maybe that’s why it got a down-vote … I’ll never know without a comment to explain the reason.) On the other hand I got just what I needed, so I’m happy I did post it.

I’m surprised I didn’t get an up-vote for my answer — even with the priceless input by others, I think it stands up pretty well.

My acceptance is going to be based largely on the usability of the answer, from my point of view — a point of view that is sadly unable to digest some of the more exciting and comprehensive responses.

Closed as an Exact Duplicate

I just tried posting this again (subject, body, tags) to see if SO would suggest the post “How to Manage CSS Explosion”. Interestingly, it did not. I added the tag refactoring to that post.

Answer 1

Split your css into separate files.

1. Put in one file the CSS reset (if you use one)
2. Then create a global.css file where you will put global styles that
   apply to many-all pages
3. Then create individual files for your individual pages

Then start styling your pages. Every time you find a style rule that is reusable on many pages make it a CSS class and put it in the global.css file. Avoid using css ID’s. You will find that you more often reuse things or will reuse in the future. In this case you use of course CSS classes.

Eventually you will find out that in your global.css you will find mostly CSS classes rules and html tag rules.

In your individual page CSS files you will find specific styles for each page.

That should give you a good first level of organization in your CSS. You can try to keep this separation through the whole development process, and for releases merge the CSS files into one and minify it.