Вложенные селекторы влияют на скорость загрузки сайта?

#css #sass

Есть sass:

#header {
    @include position(fixed, 0 null null 0);
    width: 326px;
    height: 100%;
    background-color: #1F1916;
    text-align: center;

    .top {
        @include position(absolute, 0 null null 0);
        width: 100%;

        .logo {
            background-color: #fff;
            display: block;
            padding: 50px 0 44px;

            img {
                width: 185px;
                height: 71px;
            }
        }
    }

    .bottom {
        @include position(absolute, null null 0 0);
        width: 100%;
    }
}


В результате:

#header .top .logo img {}


Влияет ли это на что-то, если да - то в какую сторону? 
    

Ответы

Ответ 1

#header .top .logo img {}


Браузер читает селекторы справа налево. Т.е. браузер выберет все картинки, потом
узнает у которых у них есть родитель с классом .logo, потом с классом .top... Ну вы поняли.


Сейчас, браузеры довольно шустры, но всё же: разумнее будет задать отдельный класс
для конкретного элемента (картинка в Вашем случае), например, .header_logo_img.


Использование id в css - не круто. Да и такие селекторы типа #header .top .logo img
- имеют очень большой "вес". Их будет трудно "перебить" в каскаде стилей ниже.


Советую Вам почитать про методики написания классов, например, БЭМ. А также установить
линтер, например, SCSS-Lint.


Ответ 2

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


Ответ 3

Поскольку конечный CSS, как я предполагаю, будет минифицирован (до полной нечитаемости),
значимой разницы нет.
Разница, скажем, в 10 кБ (достаточно большой объем для css файла) совершенно несущественна
(при загрузке занимает порядка миллисекунды при нормальном интернете и незаметна даже
при dial-up).