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

Best practice for naming DIVs in initial layout

提问by johnnyb10

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 :

新手问题在这里。我正处于基于我所做的草图在 HTML/CSS 中布局网站的开始阶段。所以我正在主页上规划我的 DIV，我想知道如何命名它们以及哪些元素应该有自己的容器。到目前为止，我有以下几点：

• 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

• 一个包含我博客中 RSS 提要的一些标题/描述的框
• 一个包含即将发生的事件的几个日期的盒子
• 一个包含一些链接到我的其他网站的框

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?

我正在寻找关于处理那些“侧边栏”元素的 DIV 的最佳（我猜也是最“语义”的）方式的意见。由于我的计划是让这三个框相互对齐，我是否应该只创建一个主要的“侧边栏”DIV，然后为每个元素（“feed-box”、“events-box”和“链接框）？或者应该没有“侧边栏”DIV（这不是暗示样式/位置吗？），而只使用三个特定的DIV？

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.)

另外，我应该给包含音频小部件的那个框一个“内容”的 id（即使我确切地知道里面有什么）还是应该像“音频小部件”这样的东西？（谁知道呢，也许一年后，它会保存一些其他类型的内容。）

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.

谢谢。

回答by cletus

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.

如果是固定宽度，通常的做法是将所有内容都包装在一个整体 div 中（通常称为“容器”或“包装器”）。你已经有了这个。

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).

您如何布置 div 的其余部分会影响它们在您的文档中出现的顺序（例如，使用浮点数往往会“反转”自然顺序）。

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:

使用基本的 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; }

回答by johnnyb10

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.

唯一正确的答案是使用尽可能少的容器来完成工作。然后提供一个 ID 值只需记住每个 ID 值必须是唯一的。不要仅仅为了有额外的命名约定而添加额外的 div 元素。div 是一个语义元素，其含义是文档的一个划分，经常被滥用。

回答by Jarrett Mattson

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.

这是我推荐的方式。我更喜欢id="container"保留内容（而不是页眉或页脚）部分<div>ID的保留和可用部分。这样内容部分 id 元素可以使用id="content"，我不必担心冲突。

<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 idattribute is used instead of class.

1) 上面的例子可能会重新渲染网页的整个内容部分，而不是只隐藏那个 div 如果容器也有id="content"预期的，如果使用id属性而不是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 idcan be used per page, but many classescan occur.

2) 如果您可能想要更多的一个提要框或其他多次出现的元素，则类是唯一的出路。id每页只能使用一个，但classes可以出现很多。

Some basic CSS to style it:

一些基本的 CSS 样式：

.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 {}