CSS, Mantenibilità del codice e 6 tecniche di buona scrittura

scritto da Francesco Gavello [+] il 03 novembre 2008 | 11 Commenti in: Web Design & UX

StressCiò che chi lavora sul il web teme di più è che il proprio progetto, da inizialmente complesso, diventi attraversando la fase di sviluppo un vero e proprio inferno in quanto a mantenibilità.

Piccoli ritocchi, eterne nuove features e cambi di direzione possono minare, se non adeguatamente controllati, la vostra salute mentale nel proporre al cliente un prodotto finale pulito e ottimizzato.

Una specie di sindrome da “quadro mai finito” vista in un ottica web 2.0 :)

Tuttavia, anche se nulla potrete fare di fronte ad una totale rivoluzione del progetto iniziale, esistono invece delle regole di “buona scrittura” che negli anni mi hanno aiutato a mantenere il controllo sul mio codice.

Si risparmia in stress, sul serio :D

Oggi parliamo di fogli di stile, ma scoprirete che alcuni accorgimenti presentati di seguito valgono più o meno per qualunque progetto preveda la stesura di codice.

1. Usare i CSS

No, davvero. Usare i CSS non è più solamente un’opzione oramai da molto tempo. Se ancora lavorate impastando contenuto e presentazione e non avete mai dato uno sguardo alle meraviglie dei fogli di stile, beh, dovreste veramente farlo. Ne gioverà la vostra salute mentale quando vi sarà chiesto di modificare la grafica del footer di turno nel corporate website da duecento pagine.

Imparare a scrivere fogli di stile nella giusta maniera è il primo passo per prendere le redini del vostro progetto.

2. Ordinare (alfabeticamente) i selettori css

Quando cominciate ad avere un foglio di stile da più di 10 Kb, diventa piuttosto difficile tenere a mente le singole caratteristiche di ogni regola mano a mano che la scrivete. Alcuni riescono ad organizzare alfabeticamente i selettori in modo da poterli ritrovare a colpo d’occhio e crearsi una specie di “modello di scrittura”.

Io non arrivo a tanto, ma in tutti i nuovi progetti da circa un anno a questa parte tendo a ordinare i selettori secondo un mio preciso schema mentale (margini, padding e width prima, tutto il resto dopo). Così mi sono abituato a fare e risparmio notevole tempo nel farlo.

Una volta trovata la vostra giusta dimensione, perdersi nel proprio CSS sarà solo un brutto ricordo.

3. Commentare

Commentare è una di quelle abitudini che si fatica a prendere all’inizio pensando “ma tanto questo me lo ricordo…” e “figuriamoci se avrò mai più bisogno di metterci mano“.

Le risate arrivano quando un paio di settimane dopo non vi ricordate nulla della struttura del documento e dovete metterci mano per via del “grande problema imprevisto®”. Spargere una buona dose di commenti è letteralmente l’ancora di salvezza lavorando con i CSS.

Se state testando una nuova tecnica di controllo dei float che potenzialmente potrebbe crearvi problemi, fatevi un favore e inserite un minuscolo commento per ricordarvelo. Se avete l’impressione di scrivere del codice ridondante appuntatevi di ripulirlo in seguito. Meglio rimuovere un commento superfluo che dannarsi per ricordarsi cosa dentro a quel commento ci avreste scritto.

4. Suddividere

Il primo CSS che scrissi era un vero e proprio macello di regole una in fila all’altra senza preciso ordine logico.

Probabilmente stato facendo i primi esperimenti e devo dire che nonostante il risultato venisse ottenuto senza problemi, non si può dire tuttavia che quel CSS brillasse di pulizia, anzi.

La sensazione era quella di non avere il totale “controllo della creazione” che tanto piace a sviluppatori e designer. Sembrava insomma che le cose andassero per conto loro mentre io stessi a guardare con in mano un pacchetto di pop corn.

Raggruppare i selettori che scrivete, utilizzando i commenti per determinarne i blocchi, funziona molto bene quando dovete andare a modificare una singola porzione di layout o utilizzando il search del vostro editor per muovervi agilmente tra un migliaio di righe.

5. Visione globale e livello di dettaglio

Probabilmente il consiglio che da solo vale tutti gli altri: uno dei grandi segreti del lavorare con i CSS è che il grosso del lavoro viene fatto senza neanche aprire l’editor.

Sul serio. Ciò che faccio prima ancora di buttare giù una singola riga di codice è fermarmi a guardare il layout per un alcuni minuti. Ho sperimentato di persona che buttarsi a testa bassa senza avere la visione globale del tutto porta a infilarsi in vicoli ciechi e a codice poco ottimizzato.

Prendersi invece un momento per tracciare alcune linee mentali, smontare mentalmente il layout pezzo per pezzo e prevedere delle linee di scrittura vi farà risparmiare stress inutile.

6. Modularità

Con la facilità di applicazioni di classi e ID,  capita con i CSS di farsi prendere la mano e scrivere più regole del necessario.

La situazione più tipica è quella in cui lo stile dei link (o delle immagini, o dei paragrafi) viene ridefinito per ogni sezione in cui questi vengono a trovarsi nel nostro layout. Un grande spreco, non trovate?

La situazione ideale, nell’ottica di mantenere un grande progetto sul lungo periodo, è di realizzare del codice in grado di essere (semi)indipendente dal suo contesto e che non richieda codice HTML superfluo.

Un link nella sua scrittura ideale secondo il mio parare non dovrebbe essere qualcosa di più di:

<a href="#" title="Il mio link" class="stile_link">Il mio link</a>

in modo da poter procedere all’applicazione di uno stile generico su tutti gli elemento “a” del layout, e uno stile particolare applicato su misura tramite la classe “.stile_link”.

Test pratico.

Coders!
Quando impiegate a rivedere elementi del vostro codice senza che tutto il resto del layout se ne vada beatamente a spasso ? Avete mai impiegato tecniche di ottimizzazione come queste per risparmiare tempo prezioso sul lungo periodo?

foto: Dave-F

Trovato questo articolo interessante?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

11 Commenti

Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

  1. Matteo_M ha detto:

    Sono regole ottime che si imparano col tempo, e che possono salvarti la vita. :D
    Un foglio di stile pulito è essenziale per ogni sito, in quanto il cliente a distanza di 6 mesi può sempre tornare (in stile zombie) con qualche idea bizzarra ^^

    ps: il mio punto debole? la mancanza di commenti… devo abituarmi >_>

    Rispondi
  2. vocalizzorotante ha detto:

    Sacrosanto!
    Vedo che sono stata preceduta da Matteo.
    il punto 3, non sottovalutatelo, gente!
    Non fate come me.

    Non oso pensare cosa mi succederà un giorno che lascerò la mia irrequieta piattaforma di hostin free (“libera” di fare tutto, tranne accedere al foglio di stile in maniera decente… :D )
    … passerò ad una irrequieta webba… cioè io!
    Nel caso, Francesco, verrai ingaggiato ;-)
    un saluto a tutti

    Rispondi
  3. Angelo ha detto:

    Anch’io ho la pessima abitudine di non usare i commenti.. ;D

    Invece in quanto all’ordine, non vado in senso alfabetico, ma in ordine degli elementi della pagina.

    Rispondi
  4. marbio ha detto:

    Come al solito ottimo post!

    Sono delle linee guida fondamentali, io nel mio piccolo cerco sempre di commentare e tenere orndinati gli elementi del file e ciò mi ha aiutato più volte a capire subito come trattare i file che non apro da tempo.

    Ciao

    Rispondi
  5. marbio ha detto:

    P.S: la foto è simpaticissima! ;-)

    Rispondi
  6. Laura ha detto:

    non mi trovo sul punto 2.. perchè spesso dimentico anche come ho chiamato i selettori, per il resto però sante parole :-)

    Rispondi
  7. MaiNick ha detto:

    Anche io come Angelo nella trascrizione del fogli di stile vado in ordine degli elementi della pagina, precisamente degli elementi dall’alto-sinistra.
    Non è il mio forte inserire i commenti per ogni regola, ma una piccola intestazione ad inizio elemento di pagina; tipo: header, mainNav, content, footer, etc.
    Giusto per capire dove inizia e dove finisce un pezzo della pagina.

    Rispondi
  8. elisa ha detto:

    Mi consola vedere che anche altre persone non vanno in ordine alfabetico ma seguendo l’ordine degli elementi di pagina… Vuol dire che tutto sommato, seguendo l’istinto, non ho fatto una cosa così strana. Quando mi capita di esaminare i css di qualcuno che sceglie altri metodi, mi trovo molto a disagio… Per fortuna c’è Firebug!
    Trovo che sia ottimo in particolar modo il consiglio 6: la logica è economia.

    Rispondi
  9. Andrea ha detto:

    MA è così importante l’ordine alfabetico?

    io di solito con firebug vedo il nome della classe o id che mi interessa e poi ctrl+f con dreamweaver e arrivo alla mia classe.

    Lo trovo tempo sprecato ordinare alfabeticamente

    Rispondi
  10. Francesco Gavello ha detto:

    Come ho detto neanche io riesco ad ordinare alfabeticamente selettori e classi, optando per un metodo tutto mio che mi consente di puntare rapidamente alla porzione di CSS che mi serve.

    Sicuramente da quando ho provato Firebug, tempo fa, ho accorciato ancora di più i tempi! :D

    Rispondi
  11. Andrea Leti ha detto:

    dovresti secondo me aggiungere un paragrafo “attenzione alla specificità dei selettori”
    per completare questo bell’articolo

    Rispondi

Lascia un commento

Anteprima commentatore

Personalizza il tuo avatar!
Vai su gravatar.com e carica quello che preferisci!

I commenti sono modificabili entro 5 minuti dal loro inserimento.
Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!