html - 某些 CSS 样式是否比其他样式更多 "expensive"？

Question

假设我有这样的设置:

<div class="dialog">
    <div class="toolbar first">Bla</div>
    <div class="toolbar">Yada</div>
</div>

和这个样式定义:

.toolbar { background-color: red; }

我实际上想要在 2 个“工具栏”之间有一个 2 像素的小边框，所以我看到了 2 个一般可能性，

1) 为“对话框”div 添加背景颜色，为第一个“工具栏”添加边距:

.dialog { background-color: #fff }
.toolbar.first { margin-bottom: 2px; }

2) 在第一个工具栏上添加一个 2px 的边框:

.toolbar.first { border-bottom: 2px solid #fff }

在渲染/应用的“成本”方面有什么不同吗？在这种程度上哪个更可取？

我知道这是一个非常小的例子，它可能没有什么真正的区别，但想象一下一个页面有几十个这样的对话框(对话？)。

Answer 1

多么及时的问题!

几天前我读到了这篇关于 CSS 性能的优秀文章。诚然，与服务整个页面所花费的精力相比，CSS 选择器的性能微不足道，但仍需牢记这一点。

http://css-tricks.com/efficiently-rendering-css/

编辑

我没有注意到问题是关于 CSS 规则而不是选择器。现在尝试回答这个问题。

就像我在原来的回答中所说的那样，CSS 性能是您能够在系统中获得最少性能的区域(通常，除非您使用过滤器之类的东西) , 如果您想微调您的网站，应该最后解决。最好保持它的可读性，并先在您网站的其他部分上工作。