CSS: su più righe o a riga singola?
Mercoledì 16 Dicembre 2009 - 08:40
di Cesare Lamanna
Quando qualcuno mi ha chiesto un’opinione su certi tool online per l’ottimizzazione del codice CSS, ho sempre messo in guardia il mio interlocutore su un aspetto: il fatto che molti di essi riscrivono il codice disponendo le singole dichiarazioni su un’unica riga. Eh sì, perché se avessi espresso il mio voto nel sondaggio promosso da CSS Tricks sarei sicuramente tra i 3868 favorevoli alla riga multipla. Cioè, non capisco davvero i vantaggi della riga singola, specie quando regole e dichiarazioni sono complesse. Se qualcuno vuole illuminarmi, mi illumini.
Commenti
1
Il vantaggio sta solo nel peso.
Quando devi modificare il css mica ti vai a riprendere quello compresso!!!
Apri la tua copia formattata come preferisci e poi la ricomprimi; meglio cmq trovare un metodo per comprimerla in automatico senza passare ogni volta attraverso un tool online.# - postato da Grab - 16 Dicembre 2009 - 09:23
2
Riga singola ad oltranza.
IMHO più pulito, ordinato più leggero, meno scrollabile.
L’altro metodo ha il vantaggio di essere più bello da vedere e più semplice da modificare.Poi è molto personale, un tool che mi scrive a riga multipla non lo sopporterei.
# - postato da yk - 16 Dicembre 2009 - 09:41
3
Personalmente la vedo come yk, al momento prediligo la riga multipla… ma c’e’ stato un periodo in cui pure io scrivevo a riga singola. E’ una pura questione di abitudine: mi sento piu’ a mio agio quando riesco ad avere una visione d’insieme del mio codice… e lavorando su riga singola puoi tenere sottocchio piu’ roba contemporaneamente.
Ora sono ritornato al multiriga, ma il monitor in cui edito i css lo tengo ruotato di 90 gradi…
4
Io uso la riga singola: è certamente questione di abitudine, riesco a leggerla meglio… la mia scorciatoia mentale è che le istruzioni CSS che stanno su quella riga si applicano con il selettore con cui inizia la riga… poi certo: il CSS è più leggero ;-)
# - postato da Andrea Paiola - 16 Dicembre 2009 - 11:14
5
Ho iniziato con la riga multipla, poi vidi il mio collega che scriveva con la riga singola e provai. Effettivamente il codice risulta molto più semplice da consultare con vantaggi non indifferenti: devi scrollare di meno, hai tutti i selettori sotto mano, puoi usare l’indentazione per strutturare il codice, e ti basta una riga vuota per dividere i vari blocchi (reset, header, footer, colonne, etc…)
# - postato da Daniele De Nobili - 16 Dicembre 2009 - 11:47
6
Personalmente amo programmare in maniera ordinata e comprensibile, affinchè in caso di modifiche non debba ristudiarmi il codice, etc.
Quando si passa alla pubblicazione online, effettuo una copia di beckup dei file esterni (css, javascript, etc) e per ogni file riporto tutto in una riga, come fa anche “jquery-min”.
Inoltre, non permetto a nessun tool online di trattare il mio codice, prefersico farlo da me…
7
Quoto Daniele de Nobili anche perchè sono io il suo collega ;P
8
Io uso SASS, per cui ho tutto su righe multiple, indentato per bene, ma il CSS prodotto è su riga singola (veramente singola, cioè un totale di una riga).
# - postato da Andrea - 16 Dicembre 2009 - 12:29
9
Da quando uso un css parser, non ho più di questi problemi. Il css rimane sempre originale e ad ogni richiesta viene fatta la miniaturizzazione compressa al massimo (niente paura, c’è anche un sistema di caching).
# - postato da Slam - 16 Dicembre 2009 - 12:54
10
Preferisco la riga multipla, per mantenere un certo ordine nel CSS: sui miei progetti personali seguo quasi sempre questo criterio.
In progetti complessi però è inevitabile passare alla riga singola: il rischio è di trovarsi fogli di stile enormi con migliaia di righe. Certo dipende anche dall’editor utilizzato.
# - postato da Tommaso Baldovino - 16 Dicembre 2009 - 12:56
11
E’ una questione di abitudine. Io uso la riga multipla per una questione d’ordine del foglio - e non sopporto se on ha i rientri a capo. E’ vero che scrolli troppo e pesa di più ma è vero anche che su ogni rigola i valori sono più leggibili, imho.
Cmq dipende anche molto, come dice tommaso, dall’editor. Con CSSEdit mi viene automatico. Con Dreamweaver la riga multipla è quasi faticosa.
12
Righe multiple e identazione a livelli, in modo che il css rappresenti l’annidamento dei corrispondenti elementi stilati nell’html
in produzione uso il mod_deflate di Apache, abilito il caching e setto gli Etags senza specifcare l’inode (a volte invece li disabilito del tutto) così da non avere caching se il css viene riaggiornato.
E’ vero comunque che un file di testo già minified (con regole in linea) guadagnerebbe un po’ di più nella compressione gzip, ma il lieve guadagno in termini di peso è ampiamente recuperato con la leggibilità del codice per il debug.
# - postato da Fabrizio Calderan - 16 Dicembre 2009 - 16:00
13
@Andrea (quello che usa SASS)
io uso LESS e mi ci trovo bene (ho scritto anche un articolo a proposito qui su HTML.it).
Ti volevo chiedere… per quale motivo lo preferisci a LESS? Ammetto che SASS sia piu’ “potente” pero’ non mi piace il fatto che utilizzi una sintassi semi-proprietaria. Trovo che LESS abbia un approccio molto piu’ soft. Nel senso: vedo SASS un po’ come una “rivoluzione” ai css, LESS come una “evoluzione” (e quindi piu’ semplice da adottare).
Cosa ne pensi?
14
come fcalderan
Righe multiple e identazione a livelli, in modo che il css rappresenti l’annidamento dei corrispondenti elementi stilati nell’html
e diventa possibile passare il lavoro a terzi…
e dopo tanto tempo capita ce io sia il terzo di me stesso…
15
@Andrea (quello che usa LESS)
Sostanzialmente ho scoperto SASS prima di LESS, e ho continuato ad usare quello. Per i miei scopi entrambi andrebbero bene.
Uno dei vantaggi che vedo è il fatto che senza tutte le parentesi e i punti e virgola il tutto risulta secondo me più leggibile.
Un altro vantaggio è che con SASS si può usare Compass. Questo automatizza la compilazione, inoltre diversi framework CSS sono stati portati su Compass.
Io sono un po’ scettico sui framework CSS, però sicuramente lo svantaggio maggiore che hanno è che costringono ad usare nomi di classi assurde. Invece con Compass+Blueprint si può scrivere una cosa del genere:
.container
__+container#header
__+column(24)
#navigation
__+column(5)
#main-content
__+column(19,true)
#footer
__+column(24)
__#legalese
____+column(20)
__#footer-links
____+column(4,true)e avere tutto suddiviso in colonne, avendo usato solo id e classi semantiche e avendo un file .sass immediatamente leggibile. (ho dovuto usare __ per l’indentazione)
LESS ha il vantaggio che il codice CSS è LESS valido. Però alla fine non mi turba troppo usare una sintassi leggermente diversa.
# - postato da Andrea - 16 Dicembre 2009 - 20:23
16
Forse il punto del tuo commento era che la sintassi LESS potrebbe diventare standard, e dunque essere implementato direttamente sui browser.
Beh, questo sarebbe un bel passo avanti, ma ci sono molte persone contrarie alla comparsa di variabili ecc. nei CSS. Fino a che entrambi richiedono di essere compilato, per me uno o l’altro va bene (le differenze di sintassi sono veramente minime)
# - postato da Andrea - 16 Dicembre 2009 - 20:26
17
Basta tenere un CSS sorgente a riga multipla per l’editing, e uno compresso da mettere in produzione.
# - postato da Mik - 17 Dicembre 2009 - 03:22
18
… ovviamente riga singola! ;-)
# - postato da sLa - 18 Dicembre 2009 - 04:36
19
Quando consulto un foglio di stile credo che l’importante sia ritrovare il selettore, non la dichiarazione. La dichiarazione la cerco dopo aver trovato il selettore che mi interessa… e disponendo le dichiarazioni sulla stessa riga del loro selettore mi sembra decisamente più semplice.
Oltretutto in questo modo posso leggere le dichiarazioni corrispondenti a più selettori senza toccare il mouse o tastiera.
Decisamente più comodo, è una questione di abitudine.
# - postato da scienzedellevanghe - 18 Dicembre 2009 - 10:21
20
Io utilizzo multiriga per elementi complessi e righe singole per elementi che hanno meno di tre o quattro istruzioni.
Per risolvere il problema del peso utilizzo uno script lato server che crea una versione senza spazi, multi righe, punti e virgola finali e compressa con gzip.
Lo script deve anche effettuare il caching del risultato per non consumare inutilmente risorse del server.
Il risultato può essere davvero strabiliante, esempio?
Un css con istruzioni multi riga miste a riga singola del peso totale di 42 KB dopo la compressione pesa solo 8 KB.Semplice, efficace, senza pippe mentali!
# - postato da Federico Capoano - 20 Dicembre 2009 - 18:28
21
Righe singole indentate a livelli in produzione.
Compressione e minifing fatta al volo sulle request.
E’ la soluzione più leggibile e meno “mattone” che conosca, mi ci trovo benissimo.# - postato da Fabio Righi - 21 Dicembre 2009 - 08:48
22
ultimamente uso mettere “regole dello stesso tipo” sulla stessa riga
#selettore
{
margin:1px 2px; padding:0;border:1 solid red;
position:absolute;left:0;right:0;bottom:0;
font-*;text-*;
}# - postato da Gunn - 21 Dicembre 2009 - 14:04
23
Mai provato il riga singola, e del tutto contrario a variabili nei css.
Il mio “stile” è sul multi righe ma per evitare file enormi, uso tanti file e li includo solo dove\quando servono.
Un file dilayout con le impostazioni base, uno per i menu, uno per l’header, uno per il footer etc.
Tutto leggibile e non ho mai file con piu di 100 righe# - postato da beppe - 23 Dicembre 2009 - 09:48
24
L’unica cosa che non si capisce “davvero” è il tuo tono vagamente irrisorio. Quello che pensi tu non è scritto nel vangelo, ci sono persone che hanno abitudini diverse dalle tue e non sono tenute ad “illuminarti”. STOP
# - postato da Savonarola - 01 Gennaio 2010 - 16:54