Question

如果我有这样的结构：

<div id="main">
  <div id="sidebar">
    <div id="tag-cloud"/>
  </div>
</div>

... css的最佳做法是什么：

#main #sidebar #tag-cloud { ... }
#tag-cloud { ... }

或者如果id='main'改为class='main'，那么范围会更糟吗？我只是想知道，如果你有ids，你是否需要适用范围？

Answer 1

取决于。大多数时候，你可以说：

#tag-cloud { ... }

是最好的（性能方面，见下文）。这样：

#main #sidebar #tag-cloud { ... }

只是做了很多不必要的检查，必然会成功。

除非您想要这样做：

#sidebar #tag-cloud { ... }
#not-sidebar #tag-cloud { ... }

在这种情况下，作用域根据#tag-cloud的位置定义不同的外观。当然，您的页面中只能有一个#tag-cloud，但您的CSS无论如何都可以处理这两种情况。

CSS检查从右到左完成。这样：

#main #sidebar #tag-cloud { ... }

评估为：“标识为tag-cloud的元素，其父级ID为sidebar，其父级ID为main。如果您的网站看起来如何 < / em>，这只是一大堆无用的DOM遍历。

不要说过这样一个事实：如果你修改你的网站结构，那么过度具体，多余的范围，整个CSS必须在很多地方改变，这无论如何都会违背目的。

Answer 2

你自己已经说过了：ID是独一无二的。因此，范围只会增加混乱。但如果他们故意出于纯粹的文档目的，我会通过缩进规则来替换它们。

E.g。而不是

#main {
    /**/
}

#main #sidebar {
    /**/
}

#main #sidebar #tag-cloud {
    /**/
}

DO

#main {
    /**/
}

    #sidebar {
        /**/
    }

        #tag-cloud {
            /**/
        }

Answer 3

通常，您的html文档中不应存在ID冲突。因此，从这个角度来看ID的范围是浪费时间。

但是，如果您错误地使用具有相同ID的多个元素，则可能需要使用作用域。但这会导致无效的HTML，并可能导致其他不良后果，因此应该避免。

Answer 4

我一直都是范围。您在此页面上可能只有一个tag-cloud，但在您网站的其他区域可能有不同的tag-cloud，这需要不同的风格。

就个人而言，我不会在CSS中使用ID。它们是限制性的，如果您的静态站点被更改为重新呈现ID的动态站点（即ASP.NET），则会导致问题。

Answer 5

我认为范围ID不是很有意义，但是我更喜欢将我的所有其他选择器限定为id。

也许你应该问自己是否需要所有的ID，或者有些人应该有课程或什么都没有。少即是多。

Answer 6

ID应该是唯一的，因此不必使用范围。一个好的javascript引擎将使用这些ID作为键来快速按ID查找元素，因此确定范围实际上会减慢速度。

但是，您可能会有一个包含多个ID的无效文档，在这种情况下，作用域将确保您不会意外地访问多个元素。但在这种情况下，你应该真的修改你的ID。

Answer 7

ID必须在文档中是唯一的，除非您出于某种原因在页面之间共享它们，#something在另一个页面上的另一个容器中可能完全不同，我只是使用：< / p>

#tag-cloud { ... }

Answer 8

id的最佳做法是用作包装

<div id="main"><!--main wrapper-->
  <div id="section"><!--section wrapper-->
  <p>something</p> 
  </div>
  <div id="sidebar"><!--sidebar wrapper-->
    <div class="tag-cloud">
  </div>

</div>

最好用上一个ID开始

#sidebar #tag-cloud { ... }

根据谷歌页面速度火灾工具，建议使用较少的深度作为css选择器

Answer 9

不，您不应该使用id作为范围，因为它们每页必须是唯一的。如果您有多个使用相同ID的元素，那么您的HTML将无法验证，并且在尝试通过javascript访问DOM时会导致问题。

例如，如果页面上有多个Id：

var myElements = document.getElementById('myduplicateid')

会返回找到匹配的第一个元素，这可能不是理想的结果。

如果您在为类似的分组对象提出id时遇到问题，我建议做这样的事情（单选按钮示例）

<input type = "radio" id = "my_radio:1" value = "1" name = "my_radio">
<input type = "radio" id = "my_radio:2" value = "2" name = "my_radio">

在你的javascript中，你会做这样的事情：

var my radio = document.getElementById('my_radio:1')

或者你正在使用jQuery，如下所示：

var my radios = $('#my_radio\\:1') # Must escape colon with double slash since it's a special character in jQuery

如果CSS选择器是#id，你需要确定它们的范围吗？

9 个答案: