@myskypesla

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

Привет. Делаю большой проект с 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%;
        }
    }
}
  • Вопрос задан
  • 1214 просмотров
Решения вопроса 1
Наиболее предпочтителен вариант 3, т.к. в этом случае предполагается, что у каждого элемента будет свой класс, что соответствует практически всем основным методологиям, и нежно любимой мной SMACSS.

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы