Sass вредит производительности?

Я занимаюсь самообразованием. Чтение этой:

движок оценивает каждое правило справа налево, начиная с самого правого селектора (называемого "ключом") и перемещаясь через каждый селектор, пока не найдет совпадение или не отбросит правило. ("Селектора" - это элемент документа, к которому должно применяться правило.)

например:

ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...]

Теперь, некоторый пример кода Sass выводит для меня:

#content #blog {
  /* ... */
}
/* line 85, ../sass/screen.scss */
#content #flickr {
  /* ... */
}

#content #flickr div p {
  /* ... */
}

этот выглядит немного неловко.. я делаю что-то не так? Это проблема общения между мной и Сасс? Мы теряем его?

редактировать: Некоторый код SCSS:

#flickr {
    @include columns(5,8);
    background: url('../img/ipadbg.png') no-repeat;

    #ipod-gloss {
        z-index: 999;
        position: relative;
    }

    div {
        margin-top: -80px;
        margin-right: 20px;

        h2 {
            color: $white;
            font-size: 24px;
        }

        p {
            margin-top: 40px;
        }
    }
}

Боковая Бонус!: в статье говорится, что браузеры (или, по крайней мере, Firefox) ищут селекторы справа налево. Я не мог понять, почему это более эффективно, почему. Есть зацепки?

9
css css-selectors sass

2 ответов

вы должны найти компромисс между ремонтопригодностью (вложенность облегчает поиск вашего пути в таблице стилей) и производительностью рендеринга.

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

тем не менее, я думаю, что вложенность слишком много не самая большая проблема. Как только я узнал о силе миксинов, я использовал их много.

например, это является ли моя часто используемая кнопка mixin:

@mixin small-button($active-color: $active-color, $hover-color: $button-hover-color, $shadow: true)
  display: inline-block
  padding: 4px 10px
  margin:
    right: 10px
    bottom: 10px
  border: none
  background-color: $button-color
  color: $font-color-inv
  +sans-serif-font(9px, 700)
  text-align: center
  text-transform: uppercase
  cursor: pointer
  @if $shadow
    +light-shadow
  &:hover
    text-decoration: none
    background-color: $hover-color
  &:last-child
    margin-right: 0
  a
    color: $font-color-inv
    &, &:hover
      text-decoration: none
  &.disabled
    +opacity(0.75)
    &:hover
      background-color: $button-color
  &.active
    background-color: $active-color
    &.disabled:hover
      background-color: $active-color

вы видите, совсем немного кода. Применение таких микшинов ко многим элементам на Вашей странице приведет к большому CSS-файлу, который требует больше времени для интерпретации.

в старомодном CSS-способе вы бы дали каждому элементу кнопки, например, класс .маленькая кнопка. Но этот метод загрязняет вашу разметку несемантическими классами.

Sass предоставляет решение, хотя: наследование селектора через @extend директива.

если вы установили значения по умолчанию для вашего параметра mixin, вы также можете предоставить простой класс, который использует mixins с вашим значением по умолчанию:

// Use this mixin via @extend if you are fine with the parameter defaults
.small-button
  +small-button

и тогда вы можете просто наследовать от этого класса в различных контекстах:

#admin-interface
  input[type=submit]
    @extend .small-button

результирующий оператор CSS агрегирует все использования .маленькая кнопка в одно правило с разделенными запятыми селекторами:

.small-button, #admin-interface input[type=submit] {
  display: inline-block;
  ...
}

В заключение, наивное использование Sass может повлиять на производительность CSS. Используется мудро, однако, это ремонтопригодно благодаря хорошо структурированному и сухому коду, это приводит к правильному разделению разметки и стиля (только семантические классы) и позволяет смарт и performant CSS-код.

15

SASS-это только язык, который компилируется до CSS. Если вас интересует производительность SASS с точки зрения того, как она работает в браузере, то SASS не входит в уравнение-он будет скомпилирован и подан в браузер как обычный CSS.

из того, что я вижу из вашего использования SASS, есть несколько вещей, которые я мог бы предложить:

  1. не есть вложить все.

возможность вложить правила внутри друг друга в SASS есть языковая функция, но вам не нужно этого делать, если это не имеет смысла.

С точки зрения вашего общего использования CSS:

  1. если вложенность становится слишком тяжелой / громоздкой, подумайте об использовании классов, где это имеет смысл.
  2. когда необходимо использовать иерархию элементов DOM, рассмотрите возможность использования [дочернего комбинатора]:.foo > .bar.

идентификаторы должны быть уникальными, поэтому всегда должны быть только ссылка на один элемент. Большую часть времени они могут быть правилами CSS сами по себе -#content #flickr станет просто #flickr, например, - и браузеры оптимизировать поиск для одного идентификатора. Единственный раз, когда вам понадобится что-то вроде #id1 #id2 Если #id2 должен появляться в разных контекстах на разных страницах.

если ваш селектор содержит такие вещи, как #id div p, что div является либо излишним, либо служит определенной цели.

  • если это лишнее, измените правило на #id p, который выбирает любой <p> это происходит как потомок #id.
  • если он служит определенной цели, Рассмотрите возможность классификации <div> С именем класса, которое описывает его назначение-возможно <div class="photos-list">. Тогда ваш CSS может стать .photos-list p, что гораздо более ремонтопригодно и многоразово.
6