Are some CSS styles more "expensive" than others?

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

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.

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

personally I think your second option is the best, you're adding a border so use border ;) - however I'd do it reverse and add the border to the second toolbar.. imagine you have more than 2, what you actually want is for the second and subsequent ones to have a top border, but not the first

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

that way that .first class is doing it's job and specifically overriding

Without knowing the which browser, and how the css is implemented, how the elements are rendered, which can vary by platform hardware, It's very difficult to find out. What may be slow today might be fast next month( and vice versa!)

About the only assumption you can make is that all browser vendors want their code to perform as fast as possible...

Keeping your CSS readable, consistent, and maintainable is much more important than 'performance'.

I would recommend to write it the way it is meant, and optimize only if you have reason to do it. If the space belongs logically to the dialog, then you should add it to the dialog, and then you can probably discard the "first" declaration.

Even if you have hundreds of this dialogs you won't notice a difference, anyway it's the client browser who will render the page and the server is not affected.

So to answer your question, yes some operations are more expensive than others, absolutely.

They generally fall into 2 categories:

1. Reflow triggering css styles
2. Non-reflow triggering css styles

Examples of styles that trigger reflow in general:

• Width
• Height
• Margin
• Padding *only if it affects adjacent elements
• Float *only if it affects adjacent elements
• Flex properties
• Borders that affect
• Basically anything that causes a portion of the DOM other than the current element to have recalculate its size
• Removing elements at the top or middle of a list

Examples of styles that don't trigger reflow:

• Background image
• Background-color
• Color
• Border color
• Padding * as long it's only on the current element and doesn't affect sizing for adjacent elements
• Removing an element at the bottom of a list or on a section that doesn't cause other elements to have to recalculate their positions/sizing/etc