在初始布局中命名DIV的最佳实践

Question

Newbie question here. I'm in the beginning stages of laying out a site in HTML/CSS based on a sketch I did. So I'm planning my DIVs on the home page and I'm wondering how to name them and which elements should have their own containers. So far, I have the following :

• container (contains everything on the page)
• header (will contain the logo and links, which are sort of connected visually)
• footer
• content (this will only contain a widget that plays audio tracks)

Now, I also want, on the right side of my page, in a sidebar of sorts, three other elements:

• a box containing some headlines/descriptions of an RSS feed from my blog
• a box containing a few dates of upcoming events
• a box containing some links to my other sites

I'm looking for opinions as to what is the best (and I guess most "semantic") way of handling the DIVs for those "sidebar" elements. Since my plan is to have those three boxes aligned on top of each other, should I just create one main "sidebar" DIV and then create separate DIVs for each of the elements ("feed-box", "events-box", and "links-box)? Or should there be no "sidebar" DIV (doesn't that imply style/position anyway?), and instead just use the three specific DIVs?

Also, should I give that box that contains the audio widget an id of "content" (even though I know exactly what is going into it) or should it be something like "audio-widget"? (Who knows, maybe a year from now, it will hold some other kind of content instead.)

What do you think is the best practice for this kind of naming? I realize that there is no one correct answer and that it might be pedantic to get too hung up on these names. But the "best" way of handling this is not obvious to me and I would like to be clear from the beginning as to why I'm adopting a given naming convention

Thanks.

Answer 1

The first question you need to ask is this: is your layout fixed or variable width?

If it's fixed width, the usual practice is to wrap everything in an overall div (usually called "container" or "wrapper"). You have this already.

How you lay out the rest of your divs then affects the order in which they appear in your document (eg using floats tends to "invert" the natural order).

I would probably have something like this:

<div id="container">
  <div id="header"></div>
  <div id="content"></div>
  <div id="sidebar">
    <div id="headlines"></div>
    <div id="events"></div>
    <div id="links"></div>
  </div>
  <div id="footer"></div>
</div>

with rudimentary CSS:

html, body, div { margin: 0; padding: 0; border: 0 none; }
#container { width: 960px; margin: 0 auto; }
#content { width: 760px; float: left; }
#sidebar { width: 200px; float: right; }
#footer { clear: both; }

Answer 2

The only correct answer is to use as few containers as possible to get the job done. Then supplying an ID value just remember each ID value must be unique. DO NOT add extra div elements just to have extra naming conventions. A div is a semantic element, whose meaning is a division of a document, that is often abused.

Answer 3

Here is how I'd recommend. I prefer to keep the id="container" reserved and available for a content (as opposed to header or footer) section <div> id. That way content section id elements can use id="content" and I don't have to worry about collisions.

<div class="container">
  <div class="header">
    <div class="headerLeft"></div>
    <div class="headerMiddle"></div>
    <div class="headerRight"></div>
    <div style="clear:both"></div>
  </div>
  <div class="content">
    <div class="contentLeft"></div>
    <div class="contentMiddle">
      <div id="style" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Style
      </div>
      <div id="content" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Content
      </div>
      <div id="originality" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Originality
      </div> 
    </div>
    <div class="contentRight">
      <div class="feedBox"></div>
      <div class="eventsBox"></div>
      <div class="linksBox"></div>
      <div class="feedBox"></div>
      <div class="eventsBox"></div>
      <div class="linksBox"></div>
    </div>
    <div style="clear:both"></div>
  </div>
  <div class="footer">
    <div class="footerLeft"></div>
    <div class="footerMiddle"></div>
    <div class="fooderRight"></div>
    <div style="clear:both"></div> 
  </div>
</div>

1) The above example may re-render the entire content section of the web page hidden instead of only that div if the container also had id="content" as intended if the id attribute is used instead of class .

2) If you might want to have more that one feed-box or other element with multiple occurrences, classes are the only way to go. Only one id can be used per page, but many classes can occur.

Some basic CSS to style it:

.container { width: 960px; margin: 0 auto; }
.header{ background-color:#000000; color:#FFFFFF; }
.headerLeft{ width:0px; float:left; }
.headerMiddle{ width: 960px; float:left; }
.headerRight{ width: 0px; float:right; }
.content { background-color:#000000; color:#FFFFFF;}
.contentLeft { width: 200px; float: left; color:#FFFFFF;}
.contentMiddle{ width: 680px; float: left; min-height:550px; background-color:#FFFFFF; color:#000000;}
.contentRight{ width: 180px; float: right; color:#FFFFFF;}
.footer { background-color:#000000; color:#FFFFFF; }
.footerLeft { width:0px; float:left; }
.footerMiddle { width: 960px; float:left; }
.footerRight { width: 0px; float:right; }
.feedBox {}
.eventsBox {}
.linksBox {}