2015-02-17 16 views
9

Oggigiorno raramente ci sono progetti che non utilizzano alcun tipo di preprocessore CSS come Sass o LESS. Anche se è stato ampiamente accettato e i vantaggi sono piuttosto chiari (come un codice più strutturato, nessuna diminuzione delle prestazioni di include e molte altre). Stavo vagando se ci sono degli svantaggi huge. Uno che riesco a pensare subito sono selettori nidificati troppo grandi che potrebbero comportare scarso rendimento durante i rifacimenti. Altri motivi per cui not utilizza il preprocessore?Quali sono i vantaggi/svantaggi dell'uso dei preprocessori CSS (ad es. Sass, LESS)

+0

L'unico svantaggio è che è possibile scrivere codice SCSS molto piccolo e snello che può portare a file CSS BIG se non si presta attenzione. Ma questo è un piccolo prezzo da pagare per tutti i grandi benefici. I CSS possono essere compressi nella risposta HTTP e saranno memorizzati nella cache da proxy e browser, quindi non è un problema. – GolezTrol

+0

Il rischio di selettori di nidificazione (in profondità) è che il CSS funzionerà solo per una determinata struttura HTML. Le modifiche al tuo HTML interrompono i tuoi stili. Si noti che LESS/SASS nidificati vengono compilati in CSS non verificato. Puoi usare metodologie come BEM per organizzarti meglio Less/SASS/CSS –

+0

Ho scritto tutto sugli svantaggi qui: http://adamsilver.io/articles/the-disadvantages-of-css-preprocessors/ –

risposta

11

Una cosa che si può trovare con i preprocess è che si finisce con vasti output di css dovuti al nesting. Su un piccolo progetto è facile tenere sotto controllo, in un grande progetto con più sviluppatori ci vuole disciplina per mantenere sotto controllo la quantità di css generata.

+0

Amen a questo. Recentemente fatto un selettore che ha creato un multiselector 187-carattere da quasi nessuna SCSS. Sembra semplice ed è facile da seguire in SCSS, ma è quasi non modificabile come un normale CSS. SCSS è ottimo per l'organizzazione, ma devi assolutamente guardare il tuo output CSS. – Scott

+1

@Jaxo La manutenibilità non è un problema (si manterrebbe il file SCSS), ma è inutilmente grande. Probabilmente "# sidebar-automatic.automatic-locked" sarebbe stato sufficiente. Ma +1 da parte mia per questa risposta. Richiede pratica e disciplina per usarlo correttamente. Usa l'annidamento solo quando è necessario, cioè nella situazione in cui avresti voluto essere in grado di nidificare i tuoi file CSS semplici. – GolezTrol

+0

Stavo passando per il mio foglio di stile alla ricerca di uno più grande, e penso di averlo trovato: 'input [list] :: - webkit-input-placeholder: dopo, selezionare [list] :: - webkit-input-placeholder: dopo, button [list] :: - webkit-input-placeholder: after, textarea [list] :: - webkit-input-placeholder: after' ... Purtroppo, questo è uno che non può essere ripulito molto più di quella. – Scott