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

Question

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

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

现在,我还想在页面的右侧,在一个侧栏中,还有其他三个元素:

• 一个包含来自我博客的RSS源的标题/描述的框
• 包含即将发生的事件的几个日期的框
• 一个包含指向其他网站的链接的框

我正在寻找关于那些"侧边栏"元素处理DIV的最佳方式(我猜最"语义")的意见.由于我的计划是将这三个框对齐,我应该创建一个主"侧边栏"DIV,然后为每个元素创建单独的DIV("feed-box","events-box"和"链接盒子"？或者应该没有"侧边栏"DIV(这不是暗示风格/位置吗？),而只是使用三个特定的DIV？

另外,我应该给那个包含音频小部件的框一个"内容"的ID(即使我确切知道它会发生什么),还是应该像"audio-widget"？(谁知道,也许一年之后,它会保留其他类型的内容.)

您认为这种命名的最佳实践是什么？我意识到没有一个正确的答案,而且过于依赖这些名字可能是迂腐的.但处理这个问题的"最佳"方式对我来说并不明显,我想从一开始就清楚我为什么采用给定的命名约定

谢谢.

Answer 1

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

如果它是固定宽度,通常的做法是将所有内容包装在一个整体div中(通常称为"容器"或"包装器").你已经有了.

然后,如何布置其余的div会影响它们在文档中出现的顺序(例如,使用浮动倾向于"反转"自然顺序).

我可能会有这样的事情:

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