div#name与#name

Question

我知道在样式表中，div#name和#name做同样的事情。就我个人而言，我已经习惯于将div#name用于我所做的大多数样式，理由是它稍微快一些，这意味着我可以通过查看CSS更容易地识别HTML元素。

然而，我看过的所有大型网站似乎都使用#name而不是div#name (包括堆栈溢出)。

事实上，我发现很难找到许多使用div#name而不是#name的网站

做我遗漏的#name有什么好处吗？有没有什么我还不知道的在div#name上使用它的原因？

Answer 1

由于ID在页面上必须是唯一的，所以您遇到的大多数ID在样式表中只会出现一次，所以不必费心包含它将出现在哪个元素上。排除它还可以节省样式表中的一些字符，这对于每天访问数百万次的大型网站来说，节省了相当多的带宽。

在ID为" name“的分区可能与ID为"name”的span显示不同的情况下，包含元素名称有一个好处(它将在一种类型的页面上显示分区，在另一种类型的页面上显示span )。这是非常罕见的，而且我个人从来没有遇到过这样做的网站。通常他们只是使用不同的ID。

的确，包含元素名称会更快，但在ID选择器中包含元素名称和排除元素名称之间的速度差异非常非常小。比站点通过排除它节省的带宽要小得多。

Answer 2

因为div#name的div部分不是必需的(因为ID在每个页面上是唯一的)，所以它使得较小的CSS文件可以删除它。较小的CSS文件意味着更快的HTTP请求和页面加载时间。

正如NickC指出的，缺少div允许在不违反样式规则的情况下更改元素的HTML标记。

Answer 3

代码的可维护性和可读性问题。

在声明element#foo时，代码样式变得严格--如果希望更改文档的结构或替换元素类型，则还必须更改样式表。

如果声明#foo，我们将更好地遵循“关注点分离”和“KISS”原则。

另一个重要的问题是CSS文件会被几个字符缩小，这可能会在大型样式表上累积到许多字符。