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

Question

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

• 容器(包含页面上的所有内容)
• 标题(将包含 Logo 和链接，它们在视觉上是相连的)
• 页脚
• 内容(这将只包含一个播放音轨的小部件)

现在，我还想在我页面的右侧，在各种侧边栏中，添加其他三个元素:

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

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

另外，我应该给那个包含音频小部件的盒子一个“内容”的 ID(即使我确切地知道里面有什么)还是应该像“音频小部件”这样的东西？ (谁知道呢，也许一年后，它会改用其他类型的内容。)

您认为这种命名的最佳做法是什么？我意识到没有一个正确的答案，过于关注这些名字可能是迂腐的。但是处理这个问题的“最佳”方式对我来说并不明显，我想从一开始就清楚我为什么要采用给定的命名约定

谢谢。

Answer 1

您需要问的第一个问题是:您的布局是固定宽度还是可变宽度？

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

您如何布置其余的 div 会影响它们在您的文档中出现的顺序(例如，使用 float 往往会“颠倒”自然顺序)。

我可能会有这样的东西:

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

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