Inheritance and specificity

[Jim]

More of a request for opinions than a direct question, but here
goes.....

When I'm creating a style sheet for any site, the first thing I do is
to analyse the design visuals and work out my standard styles, i.e. h1,
h2, p, cite etc etc. These tags will then be used as is or over-riden
at a more specific level.

I then split the page up in to #header, #nav, #content and #footer
(assuming a standard sort of build). Within the #content I then start
to define my main content. I might have for example a small image
gallery which I'd then define using:

#content #gallery
{
/* code */
}

So first question. The selectors #content and #gallery are always divs,
so should I be using div#content div#gallery? #content is unique and
will always (as far as I can see) be a div so is it really worthwhile
specifying the div in the selector?

Second question. As I said, #gallery is a descendant of #content, but
is it dangerous to define it that way? For example, what if I suddenly
decided for some bizarre reason that a #gallery could go in the #nav -
it'd mean either duplicating code or removing #content from the
selector. So is it even worth defining #gallery within #content rather
than on it's own?

Third question. Those anal designers are always wanting pixel
perfection which often requires tiny positional changes to individual
pages, currently I do this by putting an id in the body tag and then
picking out the element I need to change with the appropriate selector.
Is this a common method? What do you guys use?

Fourth question. Naming conventions, kind of. Often I'll have an image
which has a very attractive multi-border frame around it with dotted
lines and the works. This often requires 2, 3 or even 4 divs simply to
create this effect - other than being semantically inelegant, I find
myself having no other choice than to name them something like so:

<div class="photo_container_a">
<div class="photo_container_b">
<div class="photo_container_c">

</div>
</div>
</div>

Does anyone know of a more elegant naming style under these conditions?
Would you favour a more complex background image rather than doing it
with several divs?

Ok, well that's all for now. I'd really appreciate anyone chipping in
with their thoughts.

Thanks,

Jim.

[Rik]

Jim wrote:

#content #gallery
{
/* code */
}

So first question. The selectors #content and #gallery are always
divs, so should I be using div#content div#gallery?

Not necessary, so don't.

Second question. As I said, #gallery is a descendant of #content, but
is it dangerous to define it that way? For example, what if I suddenly
decided for some bizarre reason that a #gallery could go in the #nav -
it'd mean either duplicating code or removing #content from the
selector. So is it even worth defining #gallery within #content rather
than on it's own?

As it is alway unique, I'd suggest to define it on it's own. It is indeed
more flexible. It's a matter of taste though.

Third question. Those anal designers are always wanting pixel
perfection which often requires tiny positional changes to individual
pages, currently I do this by putting an id in the body tag and then
picking out the element I need to change with the appropriate
selector. Is this a common method? What do you guys use?

I tend to use non-pixel specific layout. Designers who want indentical
pixel-specific placing in all browsers should limit their activities to
printed media and images only, and stay away from the web.

There are differences in pages that have nothing to do with being
pixel-specific though. As my sites are almost always dynamically built, it
depends on what I use: for small differences I tend to use a class on the
body tag (which micht as well be an id indeed), for bigger differences I
specify different stylesheets in the head element.

Fourth question. Naming conventions, kind of. Often I'll have an image
which has a very attractive multi-border frame around it with dotted
lines and the works. This often requires 2, 3 or even 4 divs simply to
create this effect - other than being semantically inelegant, I find
myself having no other choice than to name them something like so:

<div class="photo_container_a">
<div class="photo_container_b">
<div class="photo_container_c">

</div>
</div>
</div>

Does anyone know of a more elegant naming style under these
conditions? Would you favour a more complex background image rather
than doing it with several divs?

About the naming: name the classes to what they actually represent, not how
they look. IN this case I'm not sure what's right. I tend to create my
images on the fly (and caching them) with the desired shadoweffects etc. in
PHP. Saves a lot of HTML/CSS trickery.

Grtz,
--
Rik Wasmus

[Andy Dingley]

Jim wrote:

I then split the page up in to #header, #nav, #content and #footer

I'd use .header, .nav, .content and .footer instead.

If you use an id for CSS, then it's extremely specific. This makes it
hard to sub-class(sic) it later on, if you want to over-ride it with a
more-specific class value.

So first question. The selectors #content and #gallery are always divs,
so should I be using div#content div#gallery?

Go with the least specific selector that still works. Over-specific
selectors get troublesome and "sticky" later (see above).

Second question. As I said, #gallery is a descendant of #content, but
is it dangerous to define it that way?

Good practice if these were classes, rather than id.

Superfluous (and tending towards bad) if they're ids. You can't
duplicate ids on a page, so why would you need to repeat the outer id
value in the CSS selector? Just the inner id should be all you need.

They _can_ be useful with ids in a multi-page context with an external
stylesheet. Although you can't repeat ids on a page, you _can_ repeat
them within a site. It's sometimes useful to use pairs of ids to
distinguish between the same element on different pages.

#foo-thing, #bar-thing { font-weight: normal; }

#the-foo-page #foo-thing { font-weight: bold; }

#the-bar-page #bar-thing { font-weight: bold; }

[Jim]

Andy Dingley wrote:

Jim wrote:

I then split the page up in to #header, #nav, #content and #footer

I'd use .header, .nav, .content and .footer instead.

If you use an id for CSS, then it's extremely specific. This makes it
hard to sub-class(sic) it later on, if you want to over-ride it with a
more-specific class value.

I'm not sure I agree with you on this one. The fact that they are ids
tells anyone looking at the code that these are the unique page
"placeholders". To me, making them classes would be suggesting that
they may be used elsewhere in the code which won't be the case.

Can you elaborate on what you mean by "This makes it hard to
sub-class(sic) it later on"?

Ta,

Jim.

[Andy Dingley]

Jim wrote:

Andy Dingley wrote:

Jim wrote:

I then split the page up in to #header, #nav, #content and #footer

I'd use .header, .nav, .content and .footer instead.

I'm not sure I agree with you on this one. The fact that they are ids
tells anyone looking at the code that these are the unique page
"placeholders".

Fine - so use them. If you're intending to access them from DHTML, then
certainly do so. OTOH, needing to access something as broad and blunt
as "content" via DHTML is unusual -- nav-menu is commoner though.
My point is about their use in CSS selectors, not really about HTML.
They're better (from CSS's point of view) as classes, so I'd put them
in the HTML as classes. Quite commonly you'll have id and class on the
same element (even with the same value).

To me, making them classes would be suggesting that
they may be used elsewhere in the code which won't be the case.

That's one reason - but this is another.

If you use an id for CSS, then it's extremely specific. This makes it
hard to sub-class(sic) it later on, if you want to over-ride it with a
more-specific class value.

Can you elaborate on what you mean by "This makes it hard to
sub-class(sic) it later on"?

<html>
<title>Using Class vs. id for CSS with major page components</title>

<style type="text/css" >
..nav-menu,
#nav-menu { background-color: green; }

..fluffy { background-color: pink; }
</style>

<body>

<h2>Basic colour scheme</h2>
<ul class="nav-menu" >
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<h2>This won't work (change colour)</h2>
<ul id="nav-menu" class="fluffy" >
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<h2>This will work (changes colour to pink)</h2>
<ul class="nav-menu fluffy" >
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

</html>