读者 Nicolas 写道
我经常看到对
<body>和<html>元素的 ID 和类规范。 我很好奇为什么有人会这样做？ 如果它对这两个元素都是唯一的，那么为什么不在 CSS 中指定 body 或 html 呢？
我相信 Nicolas 询问的是为什么你会这样做
<html class="happyNewYear">.happyNewYear { background: url(/images/fireworks.jpg); }当你也可以这样做的时候
html { background: url(/images/fireworks.jpg); }…并跳过类名。毕竟，肯定只有一个<html>元素，对吧？
我理解 Nicolas 的观点。如果您查看源代码并单独查看页面，我可以看到<html>元素上的任何类或 ID 似乎都是多余的。事实上，这些顶级类非常有用。让我们回顾一下理论并查看一些实际示例。
多个页面，少量 CSS 文件
CSS 的理念是从标记中抽象出设计。网站上的 100 个页面都可能使用完全相同的 CSS 文件。这在很多方面都是高效的，其中之一是设计更改发生在一个地方，而不是一百个地方。顶级类可以用来识别当前正在查看的页面，从而将样式应用于其他页面可能不会获得的样式。
不同的页面，相同的 CSS 文件，不同的设计。并且由于这发生在尽可能高的级别元素上，您可以通过单个类 钩子 控制整个页面的设计。
WordPress
一个由 WordPress 提供支持的网站使用主题来显示页面。网站上的所有页面都是根据活动主题构建的。此主题中有一个名为 header.php 的文件，它输出所有页面的顶部，如文档类型、头部和打开的 body 和 html 标签。WordPress 有一个名为 body_class() 的函数，它输出大量特定于正在加载的页面类型的类。大多数主题都有一个这样的开头 body 标签
<body <?php body_class(); ?>>在单个帖子页面上，输出可能如下所示
<body class="single single-post postid-8212 logged-in">在主页上，输出可能如下所示
<body class="home blog">现在，您可以使用许多钩子在 CSS 文件中根据页面类型以独特的方式设置样式。例如
.single h2 {
font-size: 150%; /* Fonts bigger on single post pages */
}
.home aside {
width: 100%; /* Sidebar kicked to bottom of page on homepage */
}我不完全确定为什么 WordPress 将其称为“body_class”，因为您可以（并且通常很有用）直接设置 HTML 元素的样式。仅供参考，您可以绝对将函数向上移动到 HTML 元素。
Modernizr
Modernizr 是一个 JavaScript 库，它也添加了顶级类。它在加载并运行时动态地将它们添加到 html 元素中。这些类象征着当前浏览器的功能。因此，虽然 WordPress 应用您可以用来使不同页面看起来不同的类，但 Modernizer 应用您可以用来使相同页面看起来不同的类，具体取决于浏览器功能。
这是 Modernizr 之后 html 元素可能的样子
<html class="js flexbox canvas canvastext no-webgl no-touch
geolocation postmessage websqldatabase no-indexeddb
hashchange history draganddrop websockets rgba hsla
multiplebgs backgroundsize borderimage borderradius
boxshadow textshadow opacity cssanimations csscolumns
cssgradients cssreflections csstransforms no-csstransforms3d
csstransitions fontface video audio localstorage sessionstorage
webworkers applicationcache svg inlinesvg smil svgclippaths">因此，现在您可能拥有根据功能以不同方式设置样式的 CSS
section {
background: url(boring-fallback.jpg);
}
.multiplebgs section {
background:
url(logo.png) top left no-repeat,
url(texture.jpg),
url(top-edge.png) top left repeat-y;
}其他任何东西？
我有一篇较旧的文章，其中 涵盖了相同的理念 以及使用此理念进行当前导航突出显示的经典技巧。查看它以获取其他一些提示。
如果您有一些其他使用顶级类的用例，请分享。
哇，很棒的主意……它确实有效
我是 body.isloading { cursor: progress; } 的粉丝。
同意，但我使用 ID：body#prodetail {background:#ccc;}
这是为 Modernizr 而设计的吗？ 从未想过，看起来很酷！
非常棒的提示。感谢分享 :)
我认为在 HTML 元素上放置 ID 的最初想法是为了用户构建自定义样式表（例如 FF 扩展“stylish”，它现在使用 URL 映射）。因此用户可以执行以下操作：
html#cnn-com{ font-size:150%; }或/和html#foxnews-com{ display:none; }我仍然在我的许多个人资料中使用 www-csskarma-com 的 id，但我认为现在很少有人这样做。
这似乎有点奇怪……如果您正在加载特定于站点的用户样式表，您会认为执行此操作的任何内容都会最后加载该样式表，因此您编写的任何选择器都将覆盖该页面上的相同选择器（因此无需顶级 ID）。或者同一个样式表用于每个站点？（这似乎效率低下）
是的，也许这就是它从未真正流行起来的原因
http://camendesign.com/code/developpeurs_sans_frontieres 是另一个好主意
body_class(); 函数很棒，我一直都在使用它。
我正在我的网站重新设计中使用它，其中 body 被赋予了一个 id，并且 css 文件可以覆盖单个页面的默认样式。在我的例子中，它用于动画和当前导航突出显示。
示例
//默认样式
#header { background: transparent url(“../images/header3.png”) no-repeat center top; min-width: 960px; height: 189px; color: #FFF; margin: 0 auto;}
//单个页面使用 css 特定性覆盖样式
#aboutpage #header { height: 392px; }
您可以使用这个“技巧”做很多事情 :) 感谢分享！
我在 DesignMoo 上发布了我在这篇博文中使用的那个小页面图形： http://designmoo.com/resource/page-with-turned-corner/
我喜欢在<html>标签中指定正在使用哪个版本的 IE（如果有），以便我可以为这些人指定解决方法。请参阅 HTML5 Boilerplate 以获取示例（并且通常最好查看它）。
我赞同很棒的 HTML5 Boilerplate。自定义您自己的文件“入门包”的绝佳起点，它使用条件注释将 ie 版本添加到 body 或 HTML 元素中。我想您可以称之为浏览器嗅探，但谨慎使用它会很有用。
我越来越喜欢使用 php include。在一个更大的网站上，一件很酷的事情是将您的主导航分组在一个 include 中，然后使用 body 标签指定您所在的页面，然后您可以在 css 中使用该类或 id 来对该链接进行不同的样式设置。这是一个巨大的省时方法，并且使您的代码更简洁。
我很好奇在一个元素上使用这么多类是否会降低网站性能或以任何方式“不好”。
您提供的 MODERNIZR 示例有很多类
html class="js flexbox canvas canvastext no-webgl no-touch等等..geolocation postmessage websqldatabase no-indexeddb
我经常在网站上看到它，我一直想知道这是否会影响网站速度或任何与网站相关的事情。它看起来太多了，而且由于它是动态的，元素可能会获得大量的类。
同意。这是我还没有得到很好的答案的事情。
我想看看一篇关于这方面的文章^_^
我尝试向 HTML 元素添加 10,000 个唯一类，以查看它是否会影响性能。
不会。即使在 IE6 中也是如此。非常快。
但是，如果所有这些类都是逐个添加的（就像 HeadJS 早期那样），那么你就会陷入重排的困境。那将很糟糕。
但我们并没有陷入重排的困境。所以一切都很快速和顺利。 :)
需要考虑到 HTML 元素不能有 class 属性（至少在 XHTML 1.0 中是这样）。最好将类应用于 BODY 元素。
在 HTML 5 中，在 <html> 元素上使用类和 ID 是有效的。
在 XHTML 中，你说得对，代码在 <html> 元素上有类时无法通过验证，但所有浏览器都会按预期解释代码，因此这样做是可行的。
我通常将页面背景放在 <html> 元素上，因为无论内容长度如何，背景都会填充视口。跨浏览器正确工作的页面比验证更重要。
我在制作 WordPress 主题时学会了在 body 元素上使用类（和/或 ID），我也一直在静态页面上使用它——主要是在由于某些原因无法编辑原始样式表或更改标记时需要覆盖某些 CSS 的情况下。
所以……我想知道关于这个问题是否有更多利弊，到目前为止，我已经发现了以下在 html 元素上使用类或 ID 相比在 body 元素上使用它的优点
- 填充视口的属性（如 Peter Wilson 所说）；
- 无需额外标记即可使用多个背景（例如，一个用于 html 元素，一个用于 body 元素）；
……而缺点可能只是它在 XHTML 中无法通过验证。
我是否遗漏了什么，或者在两种方式都能实现相同结果的情况下，是否只是个人喜好问题，选择在 html 或 body 上应用类/ID？
哇，你网站的另一个很棒的功能，Chris，我点击了回复按钮而不是底部的通用回复帖子，已经输入了一些文本，不得不取消。我很惊喜地发现第二个评论框已经填充了内容。太棒了！
我的评论远不如你正在一点一点创造的这个可用性梦想那么值得注意，无论如何……
最近连接到 html 元素是自然发现的。如果你愿意，你可以称之为遗留代码，不是严格意义上的那个短语，而是更多地出于方便，因为我的网站已经在基本层面上使用 HTML5 了。
但是需要挂钩并应用一些图像样式，在上下文中它必须在文档中处于更高位置。
HTML 是唯一的标签。ID 和类不是必需的，因为它是一个小的更改，但是了解所有元素通常都可以开箱即用地设置样式是有用的。
不同意，我使用类来处理 html 标签。因为在开发动态页面时，ID 很糟糕。
谢谢
id 和 class 有其自身的用途.. 实际上同时使用两者是可以的..
为什么它很糟糕？
正确的问题。实际上，当我在开发阶段必须向 Div 传递不同的 ID 时，ID 的名称与开发端发生冲突。当然，我们不能在同一个 Div 上使用多个 ID。这就是为什么类更好。
非常狭隘的视野。并不是说我不再经常使用 ID。例如，如果你没有使用网格系统并且有一个非常严格的界面，那么只对结构元素使用 ID 可能是一个好主意。
这样你就可以完全忘记它们。
如果你随后要集成博客系统或重复数据区域，那么你就可以自由地对这些区域使用类。你甚至不必考虑 ID。从而使你作为开发人员的工作更容易。如果设计师使用 ID 编写了界面，那么你可以在你的流程中完全忘记它们。
使用这个技巧对于在主导航项目上设置“活动”状态非常有用（当活动类未固定到 nav-item 时）
body#about li#nav_about {font-weight:bold /*等等*/}此技巧也适用于重新利用的页面，例如需要适合模态对话框的页面需要更精简的内容、标题、页脚等。
body.modal div#content {width:800px /*等等*/}我认为此方法可用于加快页面速度。因为为不同的页面加载不同的样式表可能意味着必须为每个外观不同的页面加载另一个样式表。但是，通过在
元素上使用类或 ID，一旦主页加载，样式表可能会被缓存，加载另一个页面将不再意味着加载另一个样式表，从而加快页面速度。最好的部分是，过去逐个加载不同的样式表意味着所有样式表不会并行加载（有一些方法可以解决这个问题），但是这种对所有 CSS 使用一个样式表的方法不仅证明更快，而且更“语义化”。
我使用一个 Drupal WYSIWYG 编辑器，它从 body 标签获取部分样式。在 body 上使用 ID 允许我传递我希望 WYSIWYG 模块看到的 Body 标签内容，以及我不希望它看到的 ID 内容。这使得控制模块的外观变得很容易。
我正在测试我的智商
不错！
感谢这篇文章。我真的很喜欢利用 body/HTML 类和 ID 进行高级主题设计。我在我的博客上写了一篇文章，介绍如何在 Drupal 中做到这一点。
http://highrockmedia.com/blog/custom-body-class-php-advanced-theming-and-css-drupal-6
使用一些 js、php 或任何其他你喜欢的脚本/嗅探方法，你可以进行浏览器特定的布局或字体 hack，例如
添加一个类 ie6 来修复浮动元素上的双边距或不稳定的绝对定位等问题。
#someFloatedDiv {float: left; margin-left: 50px;} /* 这在大多数浏览器中看起来都不错 */
.ie6 #someFloatedDiv{margin-left:25px;} /* 这将修复 ie6 */
所有内容都放在一个样式表中，无需为 ie6 加载另一个覆盖样式表。这有助于将特定元素的所有样式保存在一个位置。当然，如果脚本是延迟加载的，那么在 ie6 中你会看到一个闪烁，但如果你使用的是 ie6，你已经习惯了看到这种东西了。
现在，这不是很好吗……我希望尽管我的格式很糟糕，你也能理解我的意思！
我在 HTML 代码的 body 标签中添加了一个“nojs”类。当我的 javascript 代码执行时，它会删除此类并添加一个“js”类。这允许我根据 javascript 是否启用进行不同的样式设置。
我还没有尝试过 Modenizer。听起来它可能做同样的事情。我必须检查一下……。
真的很棒！以前不知道为什么要使用它。现在很清楚了。
我将开始将这些技术应用到我的未来项目中。非常感谢！
我以前和 Nicolas 处境相同，但这都很有道理。我真的很喜欢使用 body ID 或 Class 作为其余内容主要挂钩的概念。很棒的文章。
这是 Paul Irish 在 HTML 元素上使用类的一个巧妙（但略显凌乱）的方法。使用条件注释和单个样式表来定位 IE 的版本：http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
题外话：喜欢 css-tricks 最新版本上的评论设计。
我主要在 html/body 元素上使用 ID 来将唯一的 CMS 项目标识符附加到最终标记，这反过来将使提供特定于内容的样式变得非常简单。
另一个用例（至少对我而言）是在同一元素中使用类，以确定渲染的页面是否应为侧边栏留出空间。
使链接处于活动状态
body#contact a.contact { color: blue; }只是一个随机示例，如果对任何人有帮助，我正在使用不同的 body 类来区分我个人网站上的背景格式，http://jenius.me/v2（尚未完成，因此为 v2）。如果您查看这些页面，我根据 3 个不同的 body 类更改标题区域中的可用空间。
我发现 body 类标签特别有助于让站点范围内的 jQuery 代码知道该页面需要哪些方法。
它与 CSS 示例（“page-1”和“page-2”）非常相似，但适用于 jQuery。
始终为 body 提供一个类或 ID，以便您以后可以将功能部署到页面、部分或页面类型。
一位特定的客户希望在某些页面上将徽标收起，而在其他页面上公开显示。jQuery 根据页面 ID 处理动画（只有 2 个页面将徽标收起）。它非常有用。
如果有机会，请查看 WordPress 如何处理 body 标签上的类，这很有用。
嗯..我从未这样想过…它可以使我们更容易在一个文件中为不同的页面创建不同的样式..无需创建单独的 div 作为主体。感谢分享。.. 我将尝试此方法。:-D
真的很棒！以前不知道为什么要使用它。现在很清楚了。
非常感谢！！
我同意 AFRAZ 的说法，他认为对 html 元素使用类要好得多。在我的日常开发中，我通常使用 ID 进行服务器关系，而在谈论元素时，我习惯于使用类。
真的很棒。非常有用的信息。
感谢您的帖子。谢谢。
很好。简短而精辟的文章。
可以通过变量或任何其他方法在 .css 文件中动态传递 id 或类名。这可能吗？