10

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?

Community
  • 1
  • 1
Mohamad
  • 34,731
  • 32
  • 140
  • 219
  • @Matt, the problem with "How to Manage CSS Explosion" is, when I searched for similar questions, the word "explosion" never came to mind. "Organized" did, however, which is why I created the question, unaware of the existence of the other earlier. I'm still unsure if said question is identical to my own, though. I'm curious about structure. Perhaps I can edit the wording? – Mohamad Mar 24 '11 at 13:48

4 Answers4

4

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.

Justin Dearing
  • 14,270
  • 22
  • 88
  • 161
3

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.

Marijn van Vliet
  • 5,239
  • 2
  • 33
  • 45
2

Personally I have a little php-template-script for my xhtml output. so my xhtml templates are in sepreate .tpl files. These files can include each others. So there might be a main.tpl including head.tpl at the beginning and foot.tpl at the end and you have to code conly the dynamic part of your page in the specific template.

This is often done and now you can simply assign a stylesheet to each template. So there is a foot.css and a head.css (you can expand this as you wish).

This helpes me to have a clear coast when designing webpages.

Hope, that helps.

Legy
  • 411
  • 3
  • 9
2

You could simplify some parts of your CSS by using a framework such as Compass: http://compass-style.org/

It allows you to create variables, mixins and is overall a pretty awesome solution to most of the CSS problems you could get.

There are other solutions such as LESS or its client-side equivalent LESS Js (http://lesscss.org/)

marcgg
  • 65,020
  • 52
  • 178
  • 231