Performance of combining multiple class selectors

Question

I'm a front-end developer and I've been reading about the performance of CSS selectors and I wanted to ask you about a practice I use a lot in my projects to reuse styles "see attachment 1" and I wanted to know:

1. What are the advantages and disadvantages of combining multiple class selectors "see attachment 2" to style an HTML element?
2. Does combining multiple class selectors affect the performance of a web page?
3. How do browsers interpret this combination? Does it take more time or effort to recognize this pattern; remembering that browsers read selectors from right to left?

It should be noted that "attachment 1" is how I would have my CSS style sheet, however .btn.style1 and .btn.style2 do not have any properties declared as they are separate "see attachment 3".

/* Attachment 1 (Omit excessive use of </ div>.) */
<div class="mainHeader">
    <div class="btn style1">Lorem ipsum A</div>
    <div class="btn style2">Lorem ipsum B</div>
</div>

/* Attachment 2 */
.mainHeader {
    [property]: [value];
}

.btn.style1 {
    [property]: [value];
}

.btn.style2 {
    [property]: [value];
}

Note: In my CSS style sheet I would not declare the following selectors:

/* Attachment 3 */
.btn {
    [No properties]
}

.style1 {
    [No properties]
}

.style2 {
    [No properties]
}