Вредит ли производительность? - PullRequest
Новая
       12

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

10 голосов
/ 26 июля 2011

Я занимался самообразованием.Чтение this :

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

Например: 

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) поиск селекторов справа налево.Я не мог понять, почему это более эффективно, почему.Любые подсказки?

Ответы [ 2 ]

16 голосов
/ 29 июля 2011

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

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

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

Например, это моя часто используемая кнопка 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 вы бы указывали каждый элемент кнопки, например, класс .small-button.Но этот метод загрязняет вашу разметку несемантическими классами.

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

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

// 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 в одно правило с разделителями-запятыми: 

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

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

6 голосов
/ 26 июля 2011

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, что гораздо удобнее в обслуживании и повторном использовании.
...