1)- Cuando Usar ID y cuando usar Class?
Este es un error muy común entre los principiantes que no entienden la diferencia entre ellos. Básicamente debe haber un único elemento en la página que tenga el mismo ID, mientras que una misma CLASE puede ser usada por varios elementos dentro de la misma página.
Incorrecto:
<div id="my-id"></div>
<div id="my-id"></div>
Como podemos ver este ejemplo está mal, se repite el ID dentro del mismo documento, mientras que en el siguiente se puede observar el correcto uso de las Clases.
Correcto:
<div class="my-class"></div>
<div class="my-class"></div>
<div class="my-class"></div>
De cualquier manera no hay que aplicarle clases a todas las colleciones de elementos. Si puedes encapsular una colección de elementos dentro de otro, ya no necesitaras definir clases a cada uno de los elementos.
Incorrecto:
<div class="letra-grande"></div>
<div class="letra-grande"></div>
<div class="letra-grande"></div>
<div class="letra-grande"></div>
<div class="letra-grande"></div>
.letra-grande { Font-size: 16px; }
Correcto:
<div class="letra-grande">
<div></div>
<div></div>
<div></div>
</div>
.letra-grande { Font-size: 16px; }
2)- Sopa de DIVs
Esto sucede cuando existen demasiados DIVs en el documento para lograr algún efecto. La sopa de DIVs crea serios problemas: las páginas cargan más lento, el parseo del DOM es más lento, más CSS necesita ser escrito, y el código vuelve menos mantenible.
La principal causa de la sopa de DIVs es un mal entendido básico de como funcionan las hojas de estilo. Por ejemplo, un diseñador desea crear 3 divs anidados y aplicar un estilo particular para cada DIV, digamos background-color en el primero, margin y padding en el segundo, y font-size en el tercero. Lo que el diseñador no entiende es que a menos que esta estructura sea absolutamente necesaria, todas estas propiedades pueden ser combinadas y usar un solo DIV.
Incorrecto:
<div style="background: #ccc;">
<div style="margin:10px; padding:5px">
<div style="font-size:12px">...</div>
</div>
</div>
Correcto:
<div id="post-25">...</div>
#post-25 {
background: #ccc;
margin: 10px;
padding: 5px;
font-size: 12px;
}
Otra razón de la sopa de DIVs aparece por el deseo de usar las etiquetas DIV en lugar de etiquetas mas apropiadas como H1/H2/H3 ó UL/OL y LI. Esta practica debera ser evitada ya que crea problemas con exploradores antiguos ó exploradores movibles, escribamos webs mas semanticas.
3)-Ignorar los atajos
Leer esta lista es trabajo duro, pero escribirlo y mantenerlo es un doble inconveniente. Diseñadores CSS inmediatamente deberian aprender como reducir lo escrito necesario para darle estilo a los elementos.
El más importante patrón es que para los widths. Se vera repeteido este patrón en otras propiedades, asi que es importante aprenderlo. Debera ser de la siguiente manera: arriba, derecha, abajo, izquierda.
Incorrecto:
border-top-width:1px;
border-left-width:1px;
border-right-width:1px:
border-bottom-width:1px
Correcto:
border-width: 1px 1px 1px 1px;
Notaras en el ejemplo anterior, el ancho de todos los bordes es el mismo. Existe un atajo para esta situacion tambien:
border-width: 1px;
4)- Estilos en linea
Otro error muy común es setear, a los elementos del documento html, los estilos dentro de su etiqueta. Esto es una muy mala práctica ya que se hace muy dificil de mantener nuestro código. Además no podríamos cambiar los estilos que ya están de finidos en el elemento desde una hoja externa ya que el último valor que reconoce el navegador es el que está seteado en el objeto.
Incorrecto:
<div style="float:left; width:250px;">
<h2 style="color: #f00">...</h2>
<p style="padding:5px">...</p>
</div>
Correcto:
<div class="class-1">
<h2 class="color-rojo">...</h2>
<p class="parrafos">...</p>
</div>
.class-1{
float: left;
width:250px;
}
.color-rojo{
color:#f00;
}
.parrafos{
padding:5px;
}
5)- Usar las Etíquetas que sean Semanticamente Correctas
Es muy común el uso incorrecto de las distintas etiquetas, deben usarse las que sean semanticamente correctas. Por ejemplo para poner un título no se debe usar un div y a este setearle el tipo y tamaño de letra que desee, lo que debo hacer es usar las etiquetas del tipo h (h1 a h6) dependiendo de su importancia.
Incorrecto:
<div style="color: #f00; font-size:16px">Mi Titulo</div>
<div style="padding:5px">...parrafo...</div>
<!--Menu-->
<div class="menu">
<div><a href="">link 1</a></div>
<div><a href="">Link 2</a></div>
<div><a href="">Link 3</a></div>
</div>
Correcto:
<h1 class="titulo"style="color: #f00; font-size:16px">Mi Titulo</h1>
<p style="padding:5px">...parrafo...</div>
<!--Menu-->
<div class="menu">
<li><a href="">link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</div>
.titulo{
color:#f00;
font-size: 16px;
}
.parrafo{
padding: 5px;
}
.menu li{
list-style: none;
margin:0;
padding: 5px 0;
}