Question

我一直试图对这个问题有自己的看法，但不能，所以决定问。

虽然众所周知html中的id是为了表示页面上的唯一元素而创建的，但我的经验是页面上的唯一元素数量通常很大，特别是在自定义表单中。此外，页面上的许多独特元素都是嵌套的。

让我们采取这样一个简单的结构：

#content
  form#search-filters
     #datepicker
  #search-results

在设计代码和平时，你通常有两种方法（我使用scss，例子也是如此）：

按层次结构组织，例如

#content {
  columns(8, 12);
  #search-filters {
     @include search-filters;
      etc.

使用普通声明

#content {
  columns(8, 12);
}
#search-fiters {
  @include search-filters;

从我的观点来看，以第一种方式获得它真是太酷了，而它却以某种方式反对所有的逻辑。

这个问题在＃search-filters程序段的内容中仍然值得，如上例所示。假设您已经使用了一些Rails脚手架，它为托管过滤器的表单的每个元素生成了id，并且您想要引用该id来提供样式。您知道该元素是唯一的，并且它将以任何扩展搜索过滤器mixin的形式是唯一的。所以你希望它有id。但是你必须给它一个类来使它在逻辑上保持一致。

您对此问题有何看法？

P.S。我试过阅读关于这两种情况是否存在一些性能差异的规范，但它没有说什么： http://www.w3.org/TR/css3-selectors/#class-html

Answer 1

您通常希望拥有未嵌套的id和类选择器，因为这会为您提供最佳的渲染性能。您可以在Googles Optimize browser rendering文章中详细了解这一点。

此外，没有嵌套的CSS选择器会降低specificity，并允许您更轻松地覆盖特定情况。

对于具有可管理量的样式的简单网站，这可能无关紧要，尤其是如果您还正确处理其他速度方面，例如put styles before scripts。在这种情况下，我更喜欢嵌套样式以提高可读性。

Answer 2

我不认为嵌套ID选择器会使浏览器渲染的角度更快地应用CSS样式。

此外，由于您已经拥有该ID，因此仅使用该ID将使您的CSS更易于阅读，而不是使用长选择器链。

如果您计划引用同一元素的不同样式，如果元素应该沿着页面更改它的位置，或者可能被删除，然后在另一个位置重新创建（因此需要不同的选择器），则会有所不同。在这种情况下，您可能需要使用嵌套选择器，否则我认为不需要。

嵌套的id在css中是否合适？

2 个答案: