HTML 布局元素类名的标准？答案

【问题标题】：Standards for HTML layout element class names?HTML 布局元素类名的标准？
【发布时间】：2011-12-23 11:22:59
【问题描述】：

我正在努力研究如何使我的 CSS 与我的 HTML 尽可能分离。做到这一点的方法是以标准方式在 HTML 中编写基本布局元素，以便不同的 CSS 文件可以在没有看到的情况下准确地知道它正在使用的标记的外观。

所以我想知道是否有一套标准来说明您应该如何命名布局元素以及放置它们的顺序。例如标记我的页面的明智方法如下（请注意，我使用的是 HTML5 元素并遵循the theory that you should never use IDs for CSS rules）：

<body>
  <div class="container"> <!-- central "squeeze" for the content -->
    <header>
      <img class="logo" />
      <nav class="primary"></nav> <!-- main navigation -->
    </header>
    <aside class="pre"></aside> <!-- left column -->
    <article class="main"></article> <!-- central main content -->
    <aside class="post"></aside> <!-- right column -->
  </div>
</body>

许多页面使用类似于此基本布局的内容。但正如您所见，“容器”或“主”类的名称会有很大差异，对于列使用 <aside> 也是如此。此外，排序可能存在差异，例如有些人会将<nav> 元素放在<header> 之后而不是在其中，或者将列元素放在<article> 元素中。

有谁知道为标准化这些常用布局元素的排序和命名所做的任何工作？比如微格式之类的？

【问题讨论】：

对于类名没有硬性规定或普遍接受的标准，这里也没有使用任何微格式。只做最适合您网站的事情，不要害怕将 ID 用于 CSS - 他们将 ID 选择器放入语言中是有原因的。
从不使用ID的理论：github.com/stubbornella/csslint/wiki/Disallow-IDs-in-selectors; oli.jp/2011/ids; screwlewse.com/2010/07/dont-use-id-selectors-in-css。这是一些非常了解在大型项目中使用 CSS 的人所写的非常合理的理论。我个人绝对同意。
很多其他smart people 不同意。
我很好奇为什么您在 cmets 中发布了完整的 URL，但将其中一个隐藏在您帖子正文中的短 URL 后面……评论长度有限制，但问题和答案没有限制。只是我觉得很奇怪。
@Chris Fletcher：除了这是一个脚本问题，而不是 CSS 问题......

标签： html css standards microformats

【解决方案1】：

我认为没有绝对的标准，因为没有两个网站是相同的。

好吧，有些是，但这不是重点。 :)

无论如何，由于 CSS 是专门为标记单个网站而制作的，因此您实际上无法将其解耦得如此详细。你不会找到一些现成的 CSS 表，你可以插入你的网站来放置所有这些导航容器。

我认为最好的方法是为自己制定一个标准并坚持下去。我希望您能找到比常用但相当抽象的“容器”更好的名称。也许有一天，它会成为事实上的标准。

【讨论】：

我怀疑是这种情况。只是很多网站确实使用非常相似的布局（集中压缩内容，顶部的标题，然后是主导航，然后是主要内容，可选左列或右列），因此可以有一个标准最好的标记。越多的 CSS 和 HTMl 文档遵循标准，前端开发人员理解和编辑此类文档的工作就越容易。
我会编写自己的标准并在没有现有标准的情况下将其发布在博客或其他地方，但我会在接受您的答案之前将这个问题留在这里更长时间，以防其他人知道有用的东西。