更具体的css规则加载更好吗？

Question

你可以这样做：

.info
{
    padding: 5px ;
}

或者，如果您知道它将是div，则可以执行此操作

div.info
{
    padding: 5px ;
}

所以，当有一个嵌套列表时......你可以这样做..

div.info ul.navbar li.navitem a.sitelink
{
    color: #f00;
}

或者你可以这样做

a.sitelink
{
    color: #f00;
}

除了可读性之外，浏览器解析/运行哪个更好？

Answer 1

保持规则尽可能通用 - 它更快并且使用更少的字节。有关详细信息，请参阅Google's article。

Answer 2

我相信最具体和最短的几乎总是最好的。

请参阅http://code.google.com/speed/page-speed/docs/rendering.html

Answer 3

保持规则简单和一般是一个良好的开端。其他人必须阅读它并在某些时候理解它。

如果您担心浏览器速度性能，样式表大小等？只需通过YUICompressor运行您的样式表即可。它将清理和缩小您的CSS（例如将重复的事物组合在一起）。