Hi Frances,
With a layout like the following:
div class=left-navi
h1Navigation Area/h1
div class=buttons
ul class=list
liHome/li
liAbout/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:#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.
div class=msg-box
h2Password incorrect!/h2
pLorem ipsum emdolor/em sit amet/p
/div
/* 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/
