Chris, there are as many different methods as there are folks that use them. There hasn't been a standard that has surfaced, but here are a few things I like to do:

+ Separate typographical styles from structural styles
+ Group variations of a style together (indented below the main style)
+ Be consistent in the way you write your rules, i.e. if you use shorthand, always use shorthand. Makes it easier to find in search/replaces.
+ Comment as much as you need to remind yourself of what you did and why

Sorry, a few addenda:

+ Use id and class names that have meaning. It adds semantic value and makes it easier for you to remember what the style rule is supposed to do/affect.
+ Try to use as many of the given elements (h1, h2, h3, p, etc) before resorting to 'classitis'

Andy's advice is good.

I'm not sure exactly what you mean by automatic 'mapping'.

As for keeping your style sheets organized, I use a variety of techniques:

- I use multiple style sheets when appropriate
- I comment like crazy. I typically group my styles into logical, commented groups. ie masthead styles, body content styles, navigation styles, etc.

I'm not sure exactly what you mean by automatic 'mapping'.

Now that I think about it, it's not something that could be mapped automatically. I guess I was looking for a way to create a 'style hierarchy tree' that I could use to quickly see what attributes are controlled at what 'level'. But, since you create that hierarchy only in your naming and use, it's probably not realistic. Really, from what Andy's said, I just need to figure that out for myself.

Thank you for the suggestions. If you have any more, keep them coming. I'm going to dive in tonight, so any guidance is great!

Chris,

I've heard of some who use OmniGraffle or other wireframing software to set up such a tree to help visual a site's style(s).

However, unless you need the boxes and arrows, you can accomplish the same thing by structuring your CSS file in a heirarchial fashion with commenting.

For example, say you have a calendar in your sidebar on an archives page.

You could reference the <p> tags in this heirarchially in your stylesheet as so ('----' used for tab space):


.archives #sidebar #calendar p {
----font-size:70%;
}

It's a bit wordy and of course you could simply write "#calendar p", but it doesn't hurt and gives you several levels with which to organize, indent and heirarchitize your styles, e.g.:

.archives #sidebar {
----width:150px;
}
----.archives #sidebar #calendar {
--------background:#fefded;
----}
--------.archives #sidebar #calendar p {
------------font-size:70%;
--------}

Since you have it, use GoLive's built-in CSS editor. It's easy.

I going to guess you are using a mac, which would make this a bit pointless. But in case you are not TopStyle has a feature called site reports that might be what you're looking for. I find it pretty handy myself.

Another one, and one that works on both platforms, is Style Master. I haven't tried it yet (too busy making fonts at the moment), but it looks very interesting.