Come Riordinare Un CSS Parecchio Disordinato
Pubblicato il 28-02-2006 da Sergio | Nessun CommentoBentornato nel Mio blog. Se trovi queste pagine interessanti abbonati gratuitamente tramite RSS feed o tramite Email!
Comincio oggi una serie di piccoli tutorial tecnici basati sulla mia esperienza professionale: spero che possano esserti di qualche aiuto.
Ultimamente, lavorando ad un progetto web di grandi dimensioni giunto oramai alla fase di refactoring mi sono trovato a dover riordinare il foglio di stile.
Per mia convinzione personale preferisco avere un unico foglio di stile per un intero sito internet: questo in teoria dovrebbe rendere più facile gestire l’interfaccia grafica (soprattutto i colori e stili del testo) e dovrebbe contribuire non poco a mantenere una uniformità in tutto il sito.
Dato che il progetto è in sviluppo ormai da qualche anno, e soprattutto dato che su questo CSS ci hanno lavorato più persone con diversi gradi di conoscenza, diversi tool di sviluppo e diverse filosofie di lavoro, il risultato come prevedibile è stato un inestricabile groviglio di quasi 800 righe di codice.
A questo va sommato il fatto che data la necessità di raggiungere determinati step di sviluppo in tempi stabiliti sono state spesso fatte modifiche al volo al foglio di stile in modo da modificare un determinato aspetto dell’interfaccia giusto per la determinata release o demo tecnica.
Il foglio di stile quindi risulta assolutamente illeggibile e disordinato.
Dato che una delle caratteristiche del progetto è quella di essere configurabile in diverse distribuzioni e di avere una interfaccia grafica personalizzabile tramite appunto il css, nella “schedule” del progetto c’era da parecchio tempo la voce “Ordinare il CSS”.
Una operazione del genere sinceramente è qualcosa che non auguro neanche al mio peggior nemico: infatti richiede metodo, pazienza, attenzione ed inoltre risulta incredibilmente noiosa.
Se malauguratamente ti dovessi mai trovare in una situazione del genere ecco la mia procedura in 10 passi per uscirne vivo:
1) Riscrivi i nomi dei selettori nel modo più semplice possibile: ad esempio il selettore
body#main table.tabellaprincipale thead tr td
potrebbe tranquillamente essere semplificato in questo modo
#main .tabellaprincipale thead td
2) Prendi ogni blocco del foglio di stile ed espandilo in questo modo
.titoloselect{
font-size: 8pt;
font-style:normal;
font-weight:bold;
font-variant:normal;
text-transform: none;
color: #003366;
text-decoration: none;}
Puoi vedere che in questo modo sia il selettore, sia ogni regola del blocco sono facilmente visibili. Lascia inoltre un “a capo” prima e uno dopo ogni definizione.
Il numero di righe di foglio di stile a questo punto potrebbe raggiungere cifre spaventose: ma niente paura da qui in avanti avremo molto da cancellare.
3) Fai due copie del foglio di stile chiamandone una text.css e l’altra color.css
4) Nel foglio di stile color.css cancella tutte le regole che non riguardano i colori
Il blocco di prima ad esempio verrebbe così trasformato
.titoloselect{color: #003366;}
Molto più leggibile vero?
5) Accorpa tutti i blocchi uguali
Ad esempio questi due blocchi
.titoloselect{color: #003366;}
.titologrande{color: #003366;}
diventano
.titoloselect,
.titologrande{color: #003366;}
In questo modo sarà molto più facile quando si presenterà la necessità di cambiare i colori dell’interfaccia mantenere una uniformità cambiando una unica regola.
Inoltre in questo passaggio potresti scoprire definizioni doppie, inutili o peggio contrastanti: risolvi tutti questi problemi uno alla volta (con molta pazienza e attenzione).
6) Applica i passi 4 e 5 al css text.css questa volta però eliminando le regole che non riguardano il testo
Sempre l’esempio di prima viene trasformato in questo modo
.titoloselect{
font-size: 8pt;
font-style:normal;
font-weight:bold;
font-variant:normal;
text-transform: none;
text-decoration: none;}
7) Elimina dal foglio di stile originale ogni regola riguardante testo e colore (ovvero quelle regole che ora si trovano negli altri due fogli di stile)
Applica il passo 5 al foglio di stile originale
9) Unisci i tre file in un unico foglio di stile mettendo prima i colori poi gli stili del testo e quindi tutto il resto.
A questo punto dovresti aver ottenuto un risultato molto più facile da leggere e da gestire quindi sei a un passo dalla vittoria:
10) Completa il lavoro inserendo commenti e rifinendo le classi in modo che tutto funzioni a meraviglia. A questo punto dovrebbe essere molto più facile ottimizzare l’interfaccia del sito e mi sembra un ottimo momento per farlo.
Spero che questa guida possa esserti servita, ma la prossima volta cerca di tenere il css ordinato fin dal primo momento (questa nota è più per me che per te) e ricorda
Il codice è poesia…

