BEM (Block-Element-Modifier)

Una interessante questione in cui mi sono imbattuto leggendo di organizzazione del lavoro web di tipo BEM*, è se le dichiarazioni @import dei css creino o meno altrettante richieste http. La risposta è ( a pensarci bene, ovviamente ) si, si avrà una richiesta per ogni foglio di stile: la cosa migliore è quella di unire e consolidare il css in un unico file per la produzione.

*Block-Element-Modifier ( http://bem.info ) è una tecnica che serve a rendere modulare lo sviluppo web, suddividendo la struttura in blocchi e successivamente in elementi, (ad esempio il blocco 'ricerca' potrebbe essere composto dagli elementi label, input e dal bottone 'cerca') a cui vengono applicati dei Modifiers ( un modificatore è una proprietà di un blocco o di un elemento che ne modifica l'aspetto o il funzionamento: ad esempio, differenziando un pulsante da un altro, una volta estese le proprietà del bottone base, com enell'esempio del bottone 'active' di un menù ), in modo che ciascuna parte possa scalare indipendentemente e rapidamente.Blocchi ed elementi formano il contenuto della pagina.

 

Un altra questione del responsive riguarda il nascondere alcune parti del layout al di sotto di certe risoluzioni.
A parte che ormai non necessariamente ad alte definizioni corrispondono monitor di grandi dimensioni,come dimostrano i nuovi schermi a retina,
quello che viene nascosto con display: none;viene comunque scaricato sulla gran parte dei browser!

Per migliorare i tempi di caricamento, quindi, le mediaqueries con il display none sono inutili.
Nel caso di un immagine, ad esempio, meglio assegnare lo sfondo solo al di sopra di una certa risoluzione, piuttosto che nasconderla.
Per adeguare la definizione delle immagini ai nuovi schermi a retina, che toccano rioluzioni anche 4 volte superiori agli schermi normali ( sino a 326 ppi.) abbiamo la necessità di creare delle immagini a risoluzione doppia, ma che vengano caricate solo quando siano effettivamente necessarie.( http://www.html.it/pag/40342/caricamento-condizionale-delle-immagini-di-sfondo-nei-css )