Quanti di noi scrivono dell’ottimo codice CSS ma poi si rende conto che non è molto bello da vedere?
A me capita spesso sinceramente, ma ho trovato un paio di guide che mi hanno dato dei consigli molto belli.
Non mi rimane altro che far vedere anche a voi come poter formattare i css in modo da rendere più leggibile il nostro codice, iniziamo pure con il classico metodo di ragguppamento (le classi e gli attributi sono tutti puramente inventati):
.bold,
.title,
.subtitle { font-weight: bold; }
Questo è un metodo per raggruppare più di una classe insieme, scrivere quindi una classe sotto l’altra.
Un’altro metodo può essere quello di indentare le classi e le sottoclassi proprio come si fa in C o in PHP:
#boxNews {
font-weight: bold;
color: #910000;
}
#boxNews .title {
font-style: italic;
background: #444;
color: #fff;
}
#boxNews .title em { font-weight: normal; }
Poi ci sono vari metodi per inserire gli attributi, cambiando la posizione delle parentesi graffe:
#container {
color: #000;
}
#container
{
color: #000;
}
#container {
color: #000;
}
#container {
color: #000;
background: #fff;
}
Ultima chicca, ma non per questo meno importante, è l’allineare tutti gli attributi e suddividerli in generi per dare più leggibilità al codice:
#box {
border-top: 1px dotted #fff;
border-left: 1px solid #fff;
border-right: 1px dotted #fff;
font-size: 12px;
font-weight: bold;
padding: 2px 0 0 2px;
margin: 3px;
}
Buona programmazione!