css - 组合多个类选择器的性能

Question

我是一名前端开发人员，我一直在阅读有关 CSS 选择器性能的文章，我想问你一个我在项目中使用很多来重用样式的做法"see attachment 1"，我想知道：

1. "see attachment 2"组合多个类选择器来设置 HTML 元素样式的优点和缺点是什么？
2. 组合多个类选择器会影响网页的性能吗？
3. 浏览器如何解释这种组合？识别这种模式是否需要更多时间或精力？还记得浏览器从右到左读取选择器吗？

应该注意的"attachment 1"是，这就是我的 CSS 样式表的方式，但是.btn.style1并.btn.style2没有声明任何属性，因为它们是单独的"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];
}

注意：在我的 CSS 样式表中，我不会声明以下选择器：

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

.style1 {
    [No properties]
}

.style2 {
    [No properties]
}