Come organizzare e pulire il tuo CSS

Pulire CSSImmagine originale tratta da Fotolia
Tempo stimato di lettura: 2 minuti, 27 secondi
Pubblicato il 20 agosto 2014

Un nuovo progetto, una marea di css.

Fogli di stile la cui lunghezza è paragonabile ai 5 piani di morbidezza di una famosa pubblicità.

Abbiamo cercato di fare del nostro meglio per gestire il foglio in sezioni: commenti su commenti che ci indicano cosa fa questo, cosa fa quello, dove ci troviamo.

Il tutto per non perderci.

Non so voi…ma alla fine io mi perdo sempre qualcosa. Spesso, per questioni di tempo, inserisco alla fine del css alcune modifiche relative ad una sezione, che magari sta alla riga 345…

… mentre io sono alla riga 576939595986.

Come capacitarsi?

Come organizzarsi?

Come non perdersi?

Fatti queste domande:

Hai un foglio di stile lunghissimo e disordinato?

Ci sono stili modificati e tag lasciati vuoti?

Ci possono essere stili ripetuti e non te ne sarai accorto?

Allora questo articolo fa per te.

Organizza il tuo CSS

E’ inutile che io ti dica che, prima di iniziare qualunque cosa, devi procurarti un CSS RESET.

Il Css Reset è quel foglio di stile che ti permette di azzerare tutti i valori di default che il browser attribuisce agli elementi della pagina. In tal modo, avremo un codice visibile in maniera (quasi) omogenea almeno nei browser principali. Non mi pronuncio, ovviamente, riguardo ad Explorer 🙂

Ok, ma dove lo prendo un Css Reset?

Ce ne sono molti in rete, io ti cito i più utilizzati e famosi:

– Quello di Eric Meyer http://meyerweb.com/eric/tools/css/reset/

– Normalize http://necolas.github.io/normalize.css/

Quello di Html5Doctor http://html5doctor.com/html-5-reset-stylesheet/

Puoi scegliere se inserirlo all’inizio del tuo css generale oppure linkarlo come file a parte.

Ti consiglio la seconda opzione.

Va bene, e poi?

Ora non ti resta che decidere come vuoi organizzare il tuo css. Come vuoi scriverlo.

Puoi scegliere due alternative:

Dividere il codice all’interno di sezioni commentate, per esempio:

Inserire tutto il codice in ordine alfabetico

Mix tra la prima e seconda opzione: dividere il codice in sezioni commentate, ogni sezione in ordine alfabetico.

Pulisci/sistema il tuo CSS

Esiste un fantastico servizio che si chiama CSS LINT http://csslint.net/

Una volta caricato il file css, Lint ti dà la possibilità di trovare:

– errori sul codice

– errori nell’attribuzione delle proprietà

– valori duplicati

– valori vuoti

Nella lettura dei suggerimenti, vi renderete conto che c’è un sacco da imparare.

Altri servizi simili :

Proccssor è un tool che ti aiuta ad organizzare ed a pulire il tuo css. Presenta molte opzioni utili, come l’indentazione ed una carina suddivisione in colonne.

1

Styleneat è dallo stile molto semplice, permette anche un raggruppamento per ordine alfabetico.

2

CodeBeautifier oltre che della pulizia del css, si occupa anche di notificarti l’ottimizzazione. Infatti, una volta caricato il tuo css, vedrai apparire una casellina dei messaggi: rossi per gli errori, verdi per i suggerimenti

3

4

Dirty Markup  pulisce, oltre al css, anche html e js.

5

E tu? Come crei il tuo Css?

  • Personalmente non uso CSS reset… Mi preoccupo di scrivere codice pulito e “logico” ossia non uso una marea di DIV per un elenco (uso ) creo due files CSS, il primo stracommentato ed il secondo stright (che poi magari comprimo).
    Come detto non ritengo siamo utili i reset perché spesso contengono righe bon necessarie.

    • Ciao Mirko! Io credo che il css reset sia necessario, perchè rende la visualizzazione del tuo sito molto simile per tutti i browser (dico molto simile e non uguale perchè qualche piccola differenza c’è sempre). Inoltre ti aiuta a smaltire del lavoro che dovresti ripetere ogni volta. Potresti invece “personalizzare” il tuo reset, togliendo le righe che non ritieni opportuno utilizzare in questo o quel lavoro.

  • Ciao Manuela, l’articolo è molto carino è trovo utili anche le risorse che dai, ne
    proverò qualcuna per pulire un po i miei Css decisamente ne hanno
    bisogno.
    Io solitamente uso “initializr” come base per i miei Css e nel suo pacchetto ha gia un css reset che si chiama “normalize”. Lo usa da un anno circa e devo dire che mi sono trovato molto bene, è utile resettare tutto così non devo sprecare troppo tempo a ricalibrare tutto per diversi browser.
    Grazie!

    • Ciao Matteo, grazie per il tuo intervento!
      Mi è capitato di usare Initializr, molto carino anche per il fatto che ti permette di associare il suo download alla tipologia di html che vuoi usare (no.responsive, responsive o Bootstrap).
      Spesso mi appoggio a Bootstrap per i miei progetti, quando però il caso (o il cliente) richiede che sia creata una struttura html apposita, mi affido ad Html Boilerplate. Di suo, ha comunque Normalize e js già impostati 🙂

  • Nel mio editor (Brackets) c’è CSS-JS Lint integrato, che mi dà continuamente buoni consigli 🙂
    Nel tempo sto cambiando la gestione dell’ordine interno ai CSS, oggi le media queries sono diventate l’ossatura organizzativa del mio codice.

Shares