Formattare i CSS

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>