html - css中的嵌套ID是否合适？

Question

我一直在尝试就这个问题发表自己的看法，但不能，所以决定问一下。

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

让我们只看一个像这样的简单结构:

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

当谈到设计这种和平的代码时，您通常有两种方法(我使用的是 scss，示例也是如此):

1. 按层次组织它，例如

   #内容{  列(8、12)；  #搜索过滤器{     @include 搜索过滤器；      等等

2. 使用简单的声明

   #内容{  列(8、12)；}#search-fiters {  @include 搜索过滤器；

在我看来，以第一种方式拥有它更酷，虽然它在某种程度上违背了所有逻辑。

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

你对这个问题有什么看法？

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

Answer 1

您通常希望拥有不嵌套的 id 和 class 选择器，因为这样可以提供最佳的渲染性能。您可以在 Googles Optimize browser rendering 上详细阅读此内容文章。

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

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