Question

Imagine I have this setup:

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

and this style definition:

.toolbar { background-color: red; }

I actually want a small 2 pixel border between the 2 “toolbars”, so I see 2 general possibilities,

1) add a background colour to the “dialog” div and a margin to the first “toolbar”:

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

2) add a 2px border to the first toolbar:

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

Is there any difference in terms of “cost” of rendering/applying? Which is more desirable to that extent?

I know this is a very small example and it might make no real difference, but imagine a page with tens of these dialogs (dialogues?).

Answer 1

I think we’ll see real difference in performance only with tens of thousands of elements otherwise it’ll stay in the millisecond margin.

So my advice it to stick with the most readable/simple way which is probably adding the “direct” border to the first toolbar. 🙂