homepage Welcome to WebmasterWorld Guest from 54.145.243.51
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS: Applied Styles Management
strategies and naming conventions to organize style classes and id's
fashezee

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 175 posted 2:18 pm on Jun 11, 2002 (gmt 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?

 

Nick_W

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



 
Msg#: 175 posted 2:20 pm on Jun 11, 2002 (gmt 0)

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

Nick

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 175 posted 2:26 pm on Jun 11, 2002 (gmt 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

fashezee

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 175 posted 2:40 pm on Jun 11, 2002 (gmt 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..

Knowles

10+ Year Member



 
Msg#: 175 posted 2:48 pm on Jun 11, 2002 (gmt 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?

fashezee

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 175 posted 3:06 pm on Jun 11, 2002 (gmt 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.

Knowles

10+ Year Member



 
Msg#: 175 posted 3:26 pm on Jun 11, 2002 (gmt 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?

Eric_Jarvis

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 175 posted 4:03 pm on Jun 11, 2002 (gmt 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

papabaer

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 175 posted 8:40 pm on Jun 11, 2002 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved