Cacher is the code snippet organizer for pro developers

/*assegno le larghezze e i margin laterali in percentuale ai vari elementi*/
/*facendo la somma delle percentuali dei vari elementi ottengo la larghezza del body ovvero il 100%*/
body {
	width: 100%;
}
nav {
	width: 20%;
	margin-right: 5%;
}
aside {
	width: 20%;
	margin-left: 5%;
}
section {
	width: 50%;
}
footer > div {
	width: 30%;
}
footer > div:nth-child(2) {
	margin-right: 5%;
	margin-left: 5%;
}
/*assegno la proprietà float agli elementi che voglio siano affiancati*/
nav, aside, section {
	float: left;
}
footer {
	clear: both;
}
footer > div {
	float: left;
}
/*assegno dei margin top e bottom per distanziare gli elementi, per le altezze uso i rem*/
header {
	margin-top: 0.6rem;
}
header, nav, section {
	margin-bottom: 0.8rem;
}
article, footer {
	margin-bottom: 0.6rem;
}
/*assegno dei padding e dei margin per distanziare gli elementi dai bordi*/
h1, h2, h3, li, p, small {
	padding: 0.6rem;
}
img {
	margin-right: 0.6rem;
}
/*non ha senso assegnare un'altezza agli article e alle colonne del footer in modo che siano tutti uguali perchè la loro altezza aumenterà al restringersi della finestra del browser e viceversa.*/
/*perciò imposto un'altezza minima e poi lascio libero l'elemento di allungarsi per contenere il contenuto*/
article {
	min-height: 220px;
}
footer > div {
	min-height: 240px;
}
/*assegno un'altezza al footer che l'ha persa quando ho assegnato la proprietà float ai div in esso contenuti*/
footer {
	min-height: 240px;
}
/*assegno dei colori di sfondo agli elementi in modo da renderli facilmente riconoscibili*/
header {
	background-color: #FCF;
}
nav {
	background-color: #CCF;
}
article {
	background-color: #9F9;
}
aside {
	background-color: #FC9;
}
footer div {
	background-color: #9CC;
}
a {
	text-decoration: none;
	color: inherit;
}