一些CSS样式比其他样式更"昂贵"吗？

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选择器性能与服务整个页面所花费的精力相比微不足道,但它仍然需要牢记.

编辑

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

就像我在原始答案中所说的那样,CSS性能是你能够在系统中获得最低性能的领域(通常,除非你使用的是像过滤器这样的东西),如果你想要的话,应该在最后解决微调你的网站.最好保持它的可读性,并首先在网站的其他部分工作.

Answer 2

我认为只有成千上万的元素才会看到性能的真正差异,否则它将保持在毫秒级边缘.

所以我的建议是坚持使用最可读/最简单的方法,这可能会在第一个工具栏中添加"直接"边框.:)