Re: what constitutes "good" CSS layout?

William Gill wrote:

I'm having one of my memory lapses. I went to redo some old pages using
4.01 strict, and CSS for layout,something I have done dozens of times,
and suddenly I could not sift through the mental artifacts of the passe
and obsolete. I know CSS (columnar) layouts have been discussed here ad
infinitum, and searching my notes and Google brings numerous layout
examples. The problem is I can't remember the current state of
affairs. I seen DIV's nested several layers deep, and don't remember if
that's to compensate for some known browser bug. I don't remember
what's "so last century", and what's "leading edge." I see many
recommended layouts, yet they employ XHTML doctypes.

So, if I were to hammer out my own CSS layout, or borrow from the many
available, what kind of checklist should I have to determine its
quality? Besides the passing validation for HTML and CSS, and testing
across several browsers is there any way to create a concise checklist
by which to evaluate a design (from a layout perspective)?

I always take the pragmatic approach. The most important point in my
mind is maintainability.

Toward those goals:

1) Are there any hacks? They might changes in future (usually IE)
versions. Don't use hacks.

2) Can the layout be changed, widths adjusted, margins and padding
altered without interactive calculations? You had mentioned nested divs
and I look at nesting as being a good thing. If you are in standards
mode then if you adjust padding (or borders), and that is a common
thing, then your container width changes. It is much cleaner IMHO, to
have an inner nested div that you set padding on without affecting the
width of the outer div.

There's other good design reasons for nested divs, for example setting
background images. If you have two nested divs you can set two different
background images with different positions. This gives you the ability
to do all kinds of complex designs that used to be done with complex
layouts and foreground images just by setting background images and padding.

3) Is the stylesheet readable? Is it cluttered? I'm a big proponent of
using descendants instead of extra classes. Once again using div containers.

So, instead of this:
<h4 class="left_nav_h4">some heading</h4>
<p class="left_nav_p">some paragraph</p>
<ul class="some_other_special_class">...
<h4 class="left_nav_h4">some heading</h4>
<p class="left_nav_p">some paragraph</p>
<ul class="some_other_special_class">...

<div id="left_nav">
<h4>some heading</h4>
<p>paragraph is styled as a descendant:

#left_nav p{...
#left_nav h4{...

</p>

I see html all the time that is full of class="...

Use special purpose classnames sparingly. Otherwise you have to look
these up everytime you need to make an adjustment. Set overall styles
for the body and overide them (descendants if possible) as necessary.

For myself I've settled on a standard template and a more or less
standard stylesheet. All sites have the same structure, just that some
div containers are turned off or unused. That makes it easy to find what
needs to be changed during the inevitable adjustments.

Be consistent. Don't do leading edge stuff that requires hacks in
browsers more than second generation back.

Jeff

Beauregard T. Shagnasty wrote:

Jeff wrote:

So, instead of this:
h4 class="left_nav_h4">some heading</h4> ...

I know that's a sample, but howzabout you rewrite (and advocate) using
more meaningful words.

Probably because I don't advocate setting setting classnames for
every bit. I do advocate using meaningful words though so we agree
there. Many stylesheets have poorly named identifiers.

h4 class="primary_nav_h4">some heading</h4

..cause if next month the client says "I want the menu on the right,"
you don't have to edit every page to change to "right_nav_h4". People
would chuckle if your left_nav was on the right. :-)

I've never had that happen. But if it did I'd just change the ID or
class of the container since I am advocating styling descendants. In
practice, I use: side_nav, btw.

Jeff