On Fri, 30 Mar 2007, k9d wrote:
> It is suggested to "Always put your classname on the outer most
> element on which it makes sense and Don't Repeat Yourself (DRY)" and
> shows the following as an example:
>
> <div class="product">
> <h3>...</h3>
> <div class="description">...</div>
> <div class="links">...</div>
> </div>
Looks adequate indeed, but please note that depending on the content, it
might be better to replace two inner <div> elements by e.g. <p> and <ul>
elements, respectively. The point here is the use of classes, not the
specific markup used, but people often imitate examples more than they
should.
> but does not indicated what css would go along with that method.
Well, you use CSS as you need it. There is so much you might want to do.
The general idea here (which should perhaps be said explicitly) is that
you use the selector
.product
for rules that format the product info block as a whole and selectors like
.product h3
.product .description
.product .links
for formatting the components of product info.
> I think I am confused because while I've been hacking around with CSS
> for a while and manage to get things done, my understanding of
> inheritance is poor.
The understanding of inheritance is generally very poor, and yet people
manage to do useful things with CSS. This isn't just magic. In simple
cases, inheritance works quite intuitively. For example, if you set
.product { color: #060; background: #fffff0; }
then things seem to work much like you expect. All the information in a
product block has the color and background you set. Yet, everything you
see is actually in the _inner_ elements, for which you haven't set any
colors. By default, they inherit their parent's color. They don't inherit
its background, but it pretty much looks like they did, since the default
for background is transparent.
However, in a bit more complicated cases, things can become confusing if
you haven't studied how inheritance is defined in CSS specifications (and
even if you have). For example, if some other style sheet that is being
applied contains
body { background: #333; color: white; }
h3 { background: black; }
then one might expect to see the h3 heading either white on black as per
the latter style sheet or as set in the other. Yet, it gets black
background (since there is only one rule for background that applies to
the h3 element) and #060 (i.e., almost black) color (since there is not
setting for the color of the element itself, it inherits color from its
parent, like the enclosing div element in this case).
I guess my point is: Read good books and tutorials on CSS carefully as
regards to inheritance, and stay tuned to being confused with it for quite
some time, but don't panic and don't stop using CSS. Most people use CSS
without such understanding and they often get away with it.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
