How much does css cascading affect performance? And how to deal with it?

Question

css

Hello. I'm doing a big project with 10 css files for each separate category of the site. I am using SASS with scss syntax.
There are many guides and video tutorials on preprocessors, everyone says that they increase the speed of layout (this is true), etc., but for all their pluses, preprocessors pull a footcloth from selectors behind them, and on this basis I had a question : how does nesting in compiled for publication CSS affect rendering speed and site performance?
Here are 3 examples, tell me which one is more preferable to use and take it as a rule, or show the CORRECT OPTION
Option 1:

.header {
    .logo {
        background-color: #ccc;
        a {
            color: #000;
            text-decoration: none;
            img {
                display: block;
                width: 100%;
            }
        }
    }
}

Option 2:

.header {
    &-logo {
        background-color: #ccc;
        a {
            color: #000;
            text-decoration: none;
        }
        img {
            display: block;
            width: 100%;
        }
    }
}

Option 3:

.header {
    &-logo {
        background-color: #ccc;
        &-a {
            color: #000;
            text-decoration: none;
        }
        &-img {
            display: block;
            width: 100%;
        }
    }
}

Answer 1

Наиболее предпочтителен вариант 3, т.к. в этом случае предполагается, что у каждого элемента будет свой класс, что соответствует практически всем основным методологиям, и нежно любимой мной SMACSS.
На производительность каскадность влияет напрямую, т.к., во-первых, увеличивается размер css-файла, блокирующего отрисовку, а во-вторых, чтение селекторов и поиск в дереве происходит справа налево, т.е. в варианте 1 сперва найдутся все ссылки и изображения, и лишь потом из собранной кучи вычленятся те, что входят в шапку. Но идеально, конечно, будет как-то так:

.logo {
    background-color: #ccc;
}
.logo-link {
    color: #000;
    text-decoration: none;
}
.logo-img {
    display: block;
    width: 100%;
}

Никакой каскадности (размер выходного css сведен к минимуму), потери производительности при выборке также минимизированы.