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

我认为我们只会看到数十个数千个元素的性能上的真正差异，否则它将保持在毫秒级边缘。

所以我的建议是坚持使用最可读/最简单的方法，这可能会在第一个工具栏中添加“直接”边框。：）

Answer 3

个人认为你的第二个选项是最好的，你要添加一个边框，所以使用边框;） - 然而我会反过来并将边框添加到第二个工具栏..想象你有超过2个，什么你真正想要的是第二个和后续的有一个顶部边框，但不是第一个

.toolbar { border-top: 2px solid #fff }
.toolbar.first { border: 0;}

.first类正在做的工作，特别是覆盖

Answer 4

在不知道哪个浏览器以及如何实现css的情况下，如何呈现元素（可能因平台硬件而异），很难找到。今天可能会很慢的可能在下个月很快（反之亦然！）

关于您可以做的唯一假设是所有浏览器供应商都希望他们的代码尽可能快地执行...

保持CSS的可读性，一致性和可维护性比“性能”重要得多。

Answer 5

我建议按照它的意思编写它，并且只有在你有理由这样做时才进行优化。如果空间在逻辑上属于对话框，那么你应该将它添加到对话框中，然后你可以放弃“第一个”声明。

即使您有数百个此对话框，您也不会注意到差异，无论如何，客户端浏览器将呈现页面并且服务器不会受到影响。