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

Question

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

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

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

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

在设计这种代码安静时,你通常有两种方法(我使用scss,例子也是如此):

1. 按层次组织,例如

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

2. 使用普通声明

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

而且从我的观点是该死的冷却器,有它的第一种方式,而这在某种程度上对所有的逻辑.

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

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

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

Answer 1

您通常希望拥有不嵌套的id和类选择器,因为这样可以提供最佳的渲染性能.您可以在Googles Optimize浏览器渲染文章中详细了解这一点.

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

对于具有可管理量的样式的简单站点,这可能无关紧要,尤其是如果您还正确处理其他速度方面,例如在脚本之前放置样式.在这种情况下,我更喜欢嵌套样式以提高可读性.