Are some CSS styles more "expensive" than others?

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

What a timely question!

I read this excellent article a couple of days ago about performance for CSS. Granted that CSS selector performance is tiny compared to the effort expended on serving an entire page, but it's still something to keep in mind.

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

EDIT

I didn't notice that the question was about CSS rules and not selectors. Trying to answer that question now.

Like I said in my original answer, CSS performance is the area you'll be able to gain the least amount of performance in your system (generally, unless you're using things like filters), and should be addressed last if you want to micro tune your site. It's better to keep it readable and work on the other parts of your site first.

Answer 2

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. :)