3

Есть 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

3 ответа 3

4

#header .top .logo img {}

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

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

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

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

5
  • А что значит "Трудно перебить"? Для чего-то ID придумали в спецификации CSS, тем не менее....
    – labris
    26 мар 2017 в 8:37
  • @labris css-tricks.com/specifics-on-css-specificity - ознакомьтесь, пожалуйста. Особенно с частью "Calculating CSS Specificity Value". И, кстати, ID - это не спецификация CSS, а HTML.
    – YozhEzhi
    26 мар 2017 в 13:11
  • Насчет весовых значений ID - не спорю, просто зачем их потом перебивать при корректной логике? "Круто" или "некруто" - тут не важно, важна возможность использования элементов с уникальным ID, хотя бы для того же getElementbyID. Другое дело, что злоупотреблять ID не стоит. И все же поправлю - ID селектор используется в спецификации CSS, начиная с CSS1. Вот тут хорошее сравнение ID и class по скорости рендеринга - webo.in/articles/habrahabr/38-css-efficiency-tests-3 , классы выигрывают :)
    – labris
    26 мар 2017 в 14:12
  • "хотя бы для того же getElementbyID" - вот для js и нужен id.
    – YozhEzhi
    26 мар 2017 в 14:29
  • Собственно, ID и появился в HTML 4.01 для использования с CSS и Javascript, в версии HTML 3.02 понятие ID отсутствовало.
    – labris
    26 мар 2017 в 17:16
3

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

1
  • #header .top .logo img {} это перебор? sass у меня отлично читается 25 мар 2017 в 15:46
2

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.