Buenas Pr Cticas Con CSS 3

Buenas prácticas con CSS 3
REGLAS DE ORO, PARA SABER ACOMODAR EL CSS

Primero se ponen las etiquetas, luego por id’s y por ultimo por clases. Ej:
nav{}  Etiquetas

#texto{}  Id’s

.color{} Clases

Cada uno de los elementos se ordena alfabéticamente según sea el caso. Ej:
body{}
footer{}  Etiquetas, ordenadas alfabéticamente
nav{}

#cuerpo{}
#logo {}  Id’s,ordenados alfabéticamente
# texto {}

.cursos{}
.foto{}  Clases, ordenadas alfabéticamente
.manchita{}


Dentro de las propiedades de cada elemento, también se debe de ordenaralfabéticamente. Ej:
body
{
display: inline-block;
vertical-align: top;
width: 10%;  Propiedades CSS, ordenadas alfabéticamente dentro de una etiqueta
}
#cuerpo
{
box-shadow: rgba(0, 0, 0, 1)0px 5px 5px;
margin: 0 1em 0 0;  Propiedades CSS, ordenadas alfabéticamente dentro de un id
padding: 2em;
}
.manchita
{
opacity: 0.4;  Propiedades CSS, ordenadasalfabéticamente dentro de una clase
transition: all 0.5s ease;
}
body {
background-image: url(Ejercicio2/fondo.jpg);
}

/* INICIA CONFIGURACION DEL LOGO Y MENU*/
#logo {
width: 20%;background-color:#001F3E;
padding: 10px 250px 0 200px;
float:left;
}
#logo2 div:hover img
{
/*background: white;*/
/*-webkit-transform: rotate(360deg);*/
-webkit-transform: scale(1.2) rotate(-5deg);
}
#logo2 img
{transition: all 0.5s ease;
}
#menu {
width: 100%;
height: 163px;
background-color:#001F3E;
margin: 0 0 40px 0;
}
#menu li a:hover { /* aplica la propiedad hover al menu*/
background: orange;color: white;
cursor: pointer;
transform: rotate(360deg);
}
#menu li a
{
border-radius: 5px;
-webkit- border-radius: 5px;
padding: 10px;
transition: all 0.5s ease;
}

ul.men li {
list-style:none;/*oculta las listas*/
float: left;
margin: 0 25px 0 0;
line-height: 7.5em;

}

ul#nav {
float: left;

}

ul#nav li a {
font: 18px arial;
color: black;
margin-right: 5px;...