How to Manage CSS Explosion
- by Jason
I have been heavily relying on CSS for a website that I am working on (currently, everything is done as property values within each tag on the website and I'm trying to get away from that to make updates significantly easier).
The problem I am running into, is I'm starting to get a bit of "CSS explosion" going on. It is becoming difficult for me to decide how to best organize and abstract data within the CSS file. For example:
I am using a large number of div tags within the website (previously it was completely tables based). So I'm starting to get a lot of CSS that looks like this...
div.title
{
background-color: Blue;
color: White;
text-align: center;
}
div.footer
{
/* Stuff Here */
}
div.body
{
/* Stuff Here */
}
etc. It's not too bad yet, but since I am learning here, I was wondering if recommendations could be made on how best to organize the various parts of a CSS file. What I don't want to get to is where I have a separate CSS attribute for every single thing on my website (which I have seen happen), and I always want the CSS file to be fairly intuitive.
(P.S. I do realize this is a very generic, high-level question. My ultimate goal is to make it easy to use the CSS files and demonstrate their power to increase the speed of web development so other individuals that may work on this site in the future will also get into the practice of using them rather than hard-coding values everywhere.)
