CSS: Applied Styles Management

strategies and naming conventions to organize style classes and id's

[fashezee]

I would like to know how everyone out there is keeping track on the styles they create and apply to pages.
Having a CSS with 10 to 15 styles defined for example, it gets hard tracking which style has been applied to a certain section.

I am using anchors tags to note which styles are being used on particular section of the page.

Is anyone else running into this dilema. If so, how are you handling it?

[Nick_W]

Could you post an example of what you mean? You've completely lost me ;)

Nick

[madcat]

Hey fashezee-

I wouldn't say it's a dilemma by any means.
Just note what you do in your .css like you do in your .html. It should be easier to track at this point. You can use note tags just as you do in your html pages to label sections for when you come back in 6 months -- //.

If I understand you correctly - Use descriptive names for your styles, for i.e., #leftside, #rightside, #navbar, etc...

Your HTML will be easy to markup as well considering it will be a third the size of your table layout.

Also : the anchor tag?

M

[fashezee]

thx madcat,

Nick, sorry for being unclear. But madcat (thx) gave me some advise. It's not much of a problem, I just wish that dreamweaver had an option of clicking a on a particular style in the CSS palette and all the text that applied to that style would become highlighted.

Maybe it's available in the MX version..

[Knowles]

fashezee do you mean like the entire <div> tag? Or you mean all the <div> tags with class=foo? I would recomend using the comment tags like madcat suggested. The anchor tag you refering too, you mean your putting in <a name=foo> tags into your page for document it? Or am I misunderstanding?

[fashezee]

Yes knowles, I mean the class tag. After not working a project for a few days, when I open the document in dreamweaver, I forget which classes have been applied. I sometimes use the anchor tag to indentify which classes are being applied.

[Knowles]

You might post in the text edit portion of the forum to see if DW can do it but I have never heard of a feature like that.

I would suggest changing the anchor tag to comments. Does your code still validate with the extra anchor tags in?

[Eric_Jarvis]

the important thing is to use sensible class names...if the class name refers to the reason for the different styling rather than the style itself, then it is much easier to keep track of the styles

[papabaer]

fashezee,
don't hesitate to follow the advice of Eric_Jarvis. Use logical naming conventions as a means to organize your styles. I write a LOT of style sheets and I would find it near impossible to manage my styles without using descriptive names for the classes and id's I create.

.nilt {
float:left;
width:200px;
height:auto;
padding:5px;
color:#000;
background:#ccc;
border:1px solid #000;
}

could be used for a floating text box containing news items and .nilt would be a logical abbreviation. But what happens when your site grows, or you appliy the class in diverse locations? The class .nilt may no longer be so easily remembered.

.news-item-floatleft {
float:left;
width:200px;
height:auto;
padding:5px;
color:#000;
background:#ccc;
border:1px solid #000;
}

The above uses a name that provides description and make it much easier to manage styles. Avoid using "cryptic" abbreviations unless you absolutely can remember what they represent, and... you will be the only person to EVER work on the site. Using descriptive names is useful to everyone working on a site, not just the CSS author.