Come risparmiare tempo con la formattazione css

Per ogni progetto capita sempre di poter riciclare qualcosa, script e regole css possono tornarci utili se ben scritti e funzionali.

Una buona soluzione per risparmiare tempo sta nel crearsi un file common.css con all’interno tutto ciò che sicuramente dovremo scrivere per formattare gli elementi nell’html.

Per iniziare possiamo definire le regole base per body

body{
margin:0px;
padding:0px;
background-color:#ffffff;
color:#333333;
font-size:1em;
font-family:arial;
text-align:center;
}

Come prima cosa definiamo margine e padding a 0px per evitare ereditarietà a elementi figlio, in seguito ci occupiamo del colore di fondo e del colore del testo che devono sempre avere un contrasto elevato e permettere la leggibilità, come ultima proprietà settiamo il corpo del testo, la famiglia caratteri e l’allineamento di questo.

Invece di body si potrebbe utilizzare il selettore universale * o il tag html, personalmente preferisco utilizzare body in quanto elemento padre diretto di tutti gli elementi della pagina e anche perchè html nel css viene utilizzato per i css hacks e quando un css diventa lungo e complesso poter cercare “html” permette di rintracciare subito la regola settata per Internet explorer.

Subito dopo il body occorre occuparsi dei links

a{
text-decoration:none;
color:#333333;
}

a img{
border:none;
}

Queste due semplici regole prevengono la sottolineatura e il colore standard dei link, la prima regola viene utilizzata anche senza text-decoration, per poi gestirlo con varie classi o id nella pagina, mentre la seconda elimina il bordo di default messo sulle immagini all’interno di un link.

Per i testi daremo solo margine e padding negativo:

h1,h2,h3,h4,h5,h6,p{
margin:0px;
padding:0px;
}

Essendo queste regole dedicate alla formattazione degli elementi ci occupiamo del margine e del padding, per lo stile dettagliato esisteranno classi e regole con maggiore specificità. In questa regola si potrebbero includere anche elementi di lista e form che di norma hanno un margine ed un padding settato di default.

h1,h2,h3,h4,h5,h6,p,form,input,textarea,button,ul,ol,li,dl,dd,dt{
margin:0px;
padding:0px;
}

Queste poche regole possono farci risparmiare molto tempo, evitando di dover scrivere ogni volta le regole di formattazione. Una piccola aggiunta che trovo molto utile sono gli hack css che possono tornare utili in qualunque momento e in caso di mancato utilizzo è sufficiente cancellarli.

/*BROWSER HACK*/
/*IE 6 E PRECEDENTI*/
* html {}
/*IE 7 E PRECEDENTI*/
*:first-child+html {} * html {}
/*SOLO PER IE 7*/
*:first-child+html {}
/*IE 7 E TUTTI I BROWSER MODERNI*/
html>body {}
/*TUTTI I BROWSER MODERNI TRANNE IE 7*/
html>/**/body {}
/*Opera 9 E PRECEDENTI*/
html:first-child {}
/*END BROWSER HACK*/

Con poche righe è possibile avere sotto mano i migliori hack css per i vari browser e rimediare al volo eventuali problemi di cross browser.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con . Contrassegna il permalink.

3 risposte a Come risparmiare tempo con la formattazione css

  1. poci scrive:

    grandissimo!
    mai più ore perse in lacrime davanti a un foglio di stile

  2. Sergio scrive:

    Grandissimo, copio tutto nella mia Codebase.

    Leggendo stavo meditando su una cosa, come oramai e uso consolidato togliere il sottolineato nei link.

    Considerato che c’è anche uso consolidato non usare il sottolineato nei testi perché le parole normali non vengano confuse con i link si crea uno strano paradosso di usabilità.

    • Mauro Accornero scrive:

      Sono assolutamete daccordo con te, riservando il sottolineato ai link si rispetta una convenzione, anche i colori delle pseudo classi del link meriterebero più attenzione in un common.css da utilizzare come standard non farei mancare le sei psudoclassi crossbrowser esistenti e i selettori univoci per opera. Sempre utili in caso di calo del “settore”.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>