Comporta prestazioni dannose?

Question

Mi sono educato. Lettura this:

Il motore valuta ogni regola da destra a sinistra, a partire dal selettore più a destra (chiamato "chiave") e spostando attraverso ogni selettore finché non trova una corrispondenza o scarta la regola. (Il "selettore" è l'elemento documento a cui applicare la regola.)

Ad esempio:

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

Ora, alcune uscite esempio di codice SASS per me:

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

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

Questo sembra un po 'imbarazzante .. sto facendo qualcosa di sbagliato? Si tratta di un problema di comunicazione tra me e Sass? Lo stiamo perdendo?

Edit: Alcuni Codice 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; 
     } 
    } 
} 

Bonus Side!: l'articolo dice che i browser (o almeno Firefox) cercano i selettori da destra a sinistra. Non riuscivo a capire perché questo è un motivo più efficiente. Qualche indizio?

Answer 1

Devi trovare la tua compromesso tra la manutenibilità (nidificazione rende più facile trovare la strada in giro per il foglio di stile) e prestazioni di rendering.

Una regola empirica dice che dovresti cercare di limitarti ad un annidamento a tre livelli e dovresti evitare di annidare gli ID se non è necessario.

Tuttavia, penso che la nidificazione troppo non sia il problema più grande. Non appena mi sono reso conto della potenza dei mix, li ho usati molto.

Per esempio, questo è il mio spesso usato mixin pulsante:

@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 

Vedete, un bel po 'di codice. Applicando tali mixaggi a molti elementi nella tua pagina si tradurrà in un grande file CSS che richiede più tempo per essere interpretato.

Nel vecchio stile CSS-way si darebbe ad ogni elemento del pulsante, ad es. la classe .small-button. Ma questo metodo inquina il tuo markup con classi non comuni.

Sass offre tuttavia una soluzione: ereditarietà del selettore tramite @extend directive.

Se impostare i valori predefiniti per il vostro parametro del mixin, si può anche fornire una semplice classe, che utilizza le mixins con predefinito:

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

E poi si può solo ereditare da questa classe in vari contesti :

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

La dichiarazione CSS risultante aggrega tutti gli utilizzi di .small pulsante in una sola regola con selettori separati da virgola:

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

Concludendo, un uso ingenuo di Sass può influire sulle prestazioni CSS. Utilizzato con saggezza, tuttavia, è gestibile grazie a un codice ben strutturato e ASCIUTTO, conduce alla corretta separazione di markup e styling (solo classi semantiche) e consente codice CSS intelligente e performante.

Answer 2

SASS è solo un linguaggio che viene compilato in CSS. Se si è interessati alle prestazioni di SASS in termini di modalità di esecuzione nel browser, SASS non immette l'equazione: verrà compilata e pubblicata nel browser come un normale CSS.

---

Da quello che posso vedere del vostro uso del SASS, ci sono un paio di cose che potrei suggerire:

1. Non devi a nidificare ogni cosa.

La possibilità di annidare le regole l'una dentro l'altra in SASS è una funzione di lingua, ma non è necessario farlo se non ha senso farlo.

---

In termini di uso generale CSS:

1. Se la nidificazione diventa troppo grave/unwieldly, considerare l'utilizzo di classi in cui ha senso.
2. Quando è necessario utilizzare la gerarchia di elementi DOM, prendere in considerazione l'utilizzo del [combinatore di figlio]: .foo > .bar.

Gli ID sono pensati per essere unici, quindi dovrebbe sempre fare riferimento solo a un singolo elemento. Il più delle volte, possono essere regole CSS per se stesse - #content #flickr diventerebbe solo #flickr, ad esempio - e i browser ottimizzeranno la ricerca per un singolo ID. L'unica volta che ti serve qualcosa come #id1 #id2 è se #id2 deve apparire in diversi contesti su pagine diverse.

Se il selettore contiene elementi come #id div p, quello div è superfluo o serve a uno scopo specifico.

• Se è superfluo, modificare la regola #id p, che seleziona ogni <p> che si verifica come un discendente di #id.
• Se ha uno scopo specifico, considera di classificare lo <div> con un nome classe che ne descriva lo scopo, ad esempio <div class="photos-list">. Quindi il tuo CSS potrebbe diventare .photos-list p, che è molto più gestibile e riutilizzabile.

---