Welcome to WebmasterWorld Guest from 54.196.244.186

Forum Moderators: not2easy

Message Too Old, No Replies

CSS: Applied Styles Management

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

     
2:18 pm on Jun 11, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 12, 2002
posts:1123
votes: 0


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?

2:20 pm on June 11, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


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

Nick

2:26 pm on June 11, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


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

2:40 pm on June 11, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 12, 2002
posts:1123
votes: 0


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..

2:48 pm on June 11, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 17, 2002
posts:601
votes: 0


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?
3:06 pm on June 11, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 12, 2002
posts:1123
votes: 0


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.
3:26 pm on June 11, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 17, 2002
posts:601
votes: 0


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?

4:03 pm on June 11, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 6, 2001
posts:917
votes: 0


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
8:40 pm on June 11, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 31, 2001
posts:1238
votes: 0


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.