Re: [css-d] class and id naming conventions?

[Gareth Rodger]

Hi Frances,

  With a layout like the following:

<div class="left-navi">
     <h1>Navigation Area</h1>

     <div class="buttons">
         <ul class="list">
             <li>Home</li>
             <li>About</li>
         </ul>
     </div>
</div>

I use the following CSS:

.left-navi {
     /* Main navi box */
     width:120px;
}

.left-navi h1 {
     /* Title font */
     font-family: Verdana;
}

.left-navi .buttons {
     /* Indent buttons */
     width:100px;
     margin-left:15px;
     margin-right:5px;
}

.left-navi .buttons .list {
     /* Set the background colour */
     background-color:#ffffff;
}

.left-navi .buttons .list li {
     /* Set a bottom border for each list item */
     border-bottom: 1px solid #cccccc;
}

This enables me to have little 'groups' and so don't usually find  
myself in a muddle. I never usually have many specific class names  
like highlight etc. I will just style an em within a paragraph within  
that object e.g.

<div class="msg-box">
        <h2>Password incorrect!</h2>
        <p>Lorem ipsum <em>dolor</em> sit amet</p>
</div>

/* Message Box */
.msg-box {
        width:400px;
        height:150px;
        border: #cccccc thin solid;
}
.msg-box h2 {
        /* Big and red */
}
.msg-box p {
        /* Small and grey */
}
.msg-box p em {
        /* Highlight and bold */
}
/* /Message Box */

Hope this helps,

Gareth Rodger

W: http://www.garethrodger.com
E: [EMAIL PROTECTED]


On 18 Oct 2006, at 14:32, frances wrote:

> Hello.
>
> I've been working with css for a while now, but I still struggle with
> creating flexible and re-usable Class and ID names. IDs are usually
> easier since I most often use them for structure, so the left  
> column is
> #left-column, etc. But in cases where they are used to style  
> content, I
> am torn between trying to describe the type of stying applied
> (.highlight or .big-red-font) and the context in which it might be  
> used
> (.call-out-box or .title). The first is nice since it describes  
> what the
> styling is, but can be misleading when several styles are applied but
> the name refers to only one part (eg. .orange changes the font to
> orange, but also changes the font-face and size). The second is useful
> except when the context is ambiguous or the style could be used in
> different ways (eg. .note makes the font smaller and greys it out, but
> this styling could be used outside a note context.)
>
> Does anyone know of experienced css users creating or suggesting  
> naming
> standards for classes and IDs?
>
> Thanks for your help!
> -frances
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/