Как сильно влияет каскадность css на производительность? И как бороться с этим?

Question

[myskypesla]

Привет. Делаю большой проект с 10-ками css файлов для каждой отдельной категории сайта. Использую SASS с синтексом scss.
Есть много гайдов и видеоуроков по препроцессорам, все говорят что они увеличивают скорость работы при вёрстке (это действительно так) и т.д., но при всех своих плюсах, препроцессоры же за собой тянут портянку из селекторов и на этой почве у меня возник вопрос: как влияет вложенность в скомпилированном для публикации CSS на скорость рендера и на производительность сайта?

Вот 3 примера подскажите какой из них более предпочтительнее использовать и взять это за правило или же покажите ПРАВИЛЬНЫЙ ВАРИАНТ

Вариант 1:

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

Вариант 2:

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

Вариант 3:

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

Comments

[copal]

Ооооо, замедлит нафиг так, что на квантовом уровне перекинется на ядро планеты и остановит её вращение!!! тысячу раз слышал о замедлении но не разу не видел, если кто-то покажет на реальном примере буду рад, но только не на мифическом с трилиардами гигобайтных сообщений.

[myskypesla]

copal: Вы видимо работаете на нормально пк. У меня ноутбук 4 годовалой давнойсти, вроде бы ничего страшного да? Но даже средние по сложности проекты на нём тормозят даже без анимации, и когда залезаешь в код понимаешь что там такой бардак в CSS... Не знаю, 1 вариант конечно самый просто, но очень подозрительный

Answer 1

[Алексей Николаев]

Наиболее предпочтителен вариант 3, т.к. в этом случае предполагается, что у каждого элемента будет свой класс, что соответствует практически всем основным методологиям, и нежно любимой мной SMACSS.

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

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

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

Comments

[myskypesla]

Ну да, я про чтение справа налево знаю, просто думал может что-то изменилось со временем раз все "ГУРУ ютуба" лепят что попало. Что касается Вашего примера, полностью Вас поддерживаю, такое написание позволяет также повторно использовать эти элементы в проекте и выносить их в шаблон elements к примеру. Спасибо за ответ. Почитаю про SMACSS

[copal]

Скажите, а насколько увеличится длительность отрисовки между 100 классами линейно и 10 классами в которые вложены по 10 классов? ну или пусть будет 500 против 50 по 10. На одну милитысячную долю секунды?

[Алексей Николаев]

copal: а может, юзер на apple watch сайт хочет посмотреть... там смело эту разницу на тысячу и умножать. Хотя от серьезного теста на производительность я бы не отказался.

[Алексей Николаев]

copal: алсо, у Амазона, например, лишняя секунда загрузки стоит 1.6 миллиардов долларов в год. Стало быть, 1006000000 / 1000 = 1006000 долларовв. Иными словами, одна тысячная доля секунды потенциально может экономить более одного миллиона долларов! Задумайтесь.

[copal]

Алексей Николаев: Вы предлагаете тратить свое время чтобы амазон заработал больше? Нет, мне хочется думать о своем времени и о своем заработке.

[Егор Рублёв]

copal: а теперь представьте, клиент читает ваши сообщения =)

[copal]

Егор Рублёв: и что? Значит я должен вести себя как нигер? Если он захочет оптимизацию то для для меня вопрос только в деньгах. А если хочет чтобы чтобы всю включено было, то пусть идет нах*й.

[Егор Рублёв]

copal: вот так и живём, приходите вы в больницу, а там врачь, "если хочет чтобы вылечил, пусть платит, а так симптомы сниму и пусть живёт."

[Imin]

Егор Рублёв: Ну вы тоже пример приводите..
Если человек платит за сайт 50$ , то соответственно он на 50$ получает.
Вы когда в магазин приходите купить килограмм апельсинов, то получаете килограмм апельсинов, а не столько, сколько вам нужно, чтобы вы сами стали апельсином.
Сейчас все хотят всё и на халяву....и без желания, тратить на это деньги.
Вы приводите в пример амазон, у которого там каждая секунда миллион долларов...
но вы не приводите суммы, сколько амазон и тратит на разработку / поддержку и т.п.
Чтобы сокращать свои такие вот секундные издержки..
Вы хоть сами думайте, что вы говорите, а потом пишите о том, как живем.

[Imin]

Алексей Николаев: У всего свои масштабы.Человек явно задавал вопрос не касающейся десятитысячных секунд..

[Алексей Николаев]

Imin: человек не указал конкретные диапазоны, в которых вопрос о производительности был актуален

[Алексей Николаев]

Imin: и вот потом всякие настрочат абсолютно адского css с кучей каскадов и перезаписей, и удивляются, почему сайты тормозят

[myskypesla]

Алексей Николаев: Пришел к тому, что создал scss lint и сделал максимальную вложенности 2 селектора. Код читается легко, + при замере производительности приложения, разница - доли секунды