6 trucchetti per impostare file HTML o CSS più leggibili

Spesso, nella creazione di un foglio di stile, ma anche di un documento html, si dà poca importanza alla forma del css stesso.

Ma se, come capita, il sito a cui dobbiamo lavorare è piuttosto importante, oppure è necessario rimetterci le mani dopo un po’ di tempo, oppure deve essere maneggiato anche da terze persone, siamo sicuri che saremo in grado di comprenderlo con immediatezza?

In rete si trovano diversi suggerimenti per organizzare al meglio il CSS.
Ho provato a raccoglierne alcuni in questo post.

1. Tenere traccia dei DIV

Specie se ci sono un po’ di <div> annidati, o se tra apertura e chiusura del tag c’è molto codice, può essere utile aggiungere al </div> un commento per capire al volo a quale id o classe si riferisce, in questo modo:

</div><!-- end #content-->

2. Separare gli stili

I fogli di stile sono sempre più lunghi 😉
Raggruppare le classi a seconda della loro funzione può aiutarci a ritrovarle più velocemente.

Un esempio:

/* layout ----------------------------------------------------- */


/* typography ---------------------------------------------------- */


/* forms ---------------------------------------------------- */

3. Sandboxing e ridondanza

Sono 2 “tecniche” che specificano codice css anche quando non ce ne sarebbe bisogno.

E allora? direte voi.

E invece può essere usarle per migliorare la leggibilità del CSS stesso.

Quindi conviene sempre specificare ad esempio #news p.incipit invece di p.incipit (sandboxing) e ripetere margini, padding e bordi (ridondanza) anche quando sarebbero ereditati da elementi padri.

Vero: la dimensione del file aumenta. Ma le possibilità di errore diminuiscono drasticamente.

4. Shorthand

Per le proprietà border, padding, margin, font, usare le “versioni abbreviate”, piuttosto che stare a scrivere margin-top, margin-bottom…

5. Annullare i valori di default

* { margin:0; padding:0; border:0; }

Sarebbe la prima dichiarazione da indicare in un css!!!

6. Non esagerare con i div

A volte si tende a fare un
<div class="titolo>...</div>
<div class="sottotitolo>...</div>
Ma in effetti è eccessivo!

Perchè non usare <h1> e <h2>??? Si guadagna in semantica del documento (e un tempo si diceva anche in posizionamento, ora non so).

Link utili

Huddle Together
Content with style
Erratic Wisdom
Blog Herald

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...