Sovrascrivi Vs in modo selettivo Caricamento CSS con Modernizer (YepNope)

Question

Non so come testare questo, ma ci sono miglioramenti delle prestazioni dal caricamento in un foglio di stile CSS tramite una query con Modernizer.load come opporsi alla sovrascrittura della regola con un nome di classe CSS in lo stesso foglio di stile.

Ad esempio, se un dispositivo è dotato di supporto touch, allora ho un layout diverso da caricare, è più veloce per fare ...

{ 
    test: Modernizr.touch, 
    yep : 'css/touch.css', 
    nope: 'css/base.css' 
} 

o sovrascrivere gli stili nello stesso foglio di stile ...

.container { width: 50% } 

.touch .container { width: 100% } 

Sembra che la differenza si riduce alla velocità della query aggiuntiva Vs il peso di avere un grande file CSS?

Answer 1

devi capire che hai 3 dettagli qui.

1. la chiamata al server.

2. il tempo browser per calcolare tutti del tuo stile principale

3. il peso dei file.

quindi la risposta è.

se si scrive il css senza l'interruzione di riga tra la proprietà il 1 file grande sarà più grande dai 2 file. ed è la risposta al peso causa che 1 file è migliore.

se si dispone di un'intera pagina da creare con .touch class è più calcolare di venire il file con le classi.

così, quello che sto faccio è chiamare al server solo una volta e fare una causa file è meglio per caricare tutto lo stile di insieme e la chiamata al server (il valore del tempo importante) sarà prossimamente

Answer 2

I penso che entrambe le opzioni siano perfettamente valide.

Se c'è una grande quantità di codice CSS specifico da toccare, quindi direi di sì, inseriscili con Modernizr per evitare l'onere aggiuntivo sui browser non touch.

Tuttavia, la mia preferenza sarebbe generalmente utilizzare gli stili di override per questo tipo di cose.

La ragione di questo è che con l'opzione Modernizr, ti verrà ritardare il caricamento degli stili di contatto, perché non può fare la prova Modernizr finché lo script Modernizr è caricato e pronto per l'esecuzione.

Quindi, confrontato con il caricamento come parte del caricamento della pagina principale e pronto per il rendering iniziale, viene caricato solo dopo il caricamento della pagina e potrebbe non essere pronto immediatamente.

Il risultato potrebbe essere che la pagina potrebbe essere caricata e visualizzata prima che vengano caricati gli stili touch. Non ideale

Questo non è per battere Modernizr - è un ottimo strumento - ma se si può fare ciò che è necessario senza usarlo, è generalmente meglio.