Hi Frances,
With a layout like the following:
Navigation Area
Home
About
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:#ff;
}
.left-navi .buttons .list li {
/* Set a bottom border for each list item */
border-bottom: 1px solid #cc;
}
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.
Password incorrect!
Lorem ipsum dolor sit amet
/* Message Box */
.msg-box {
width:400px;
height:150px;
border: #cc 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/
