Escribir código css correctamente

Aprendemos a escribir código CSS de manera correcta para evitar que exista «código sucio» y nos entorpezca en el momento en el que las reglas funcionen

28 Nov 2009

Normalmente cuando vemos códigos css de algunas páginas, cada diseñador o maquetador lo hace de una manera diferente, pero deberiamos seguir una reglas básicas a la hora de escribir nuestro código css, aquí os dejo algunos consejos para que vuestro código sea más correcto.

1.-Se recomienda mantener siempre las declaraciones CSS en una sola línea, para mantener tu archivo CSS limpio y más pequeño.

Correcto

h2 {font-size:18px; color:#333333; background:#cccccc; }

Incorrecto

h2 
{
 font-size:18px;
 color: #333333;
 background: #cccccc; 
}

2.-Combinar elementos

Una de la mejor manera de ahorrar líneas de código es mediante la agrupación de selectores.

Correcto

h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }

Incorrecto

h1 {
font-family: Arial, Helvetica, sans-serif; color:#333; 
}
h2 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }
h3 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }

3.-Usar «Margin» para centrar el layout

#Container { margin:0 auto; /* top, bottom - and left, right*/ width:xxxpx;  }

4.-Comentar tu CSS
Es muy importante comentar tu CSS, posiblemente al cabo de un año o meses, un cliente te puede pedir modificaciones en la página web, sino lo tenemos comentado, nos será bastante dificil encotrar las clases que estabamos usando.

/******** CODE START HERE ********/

5.-Prueba a usar herramientas de optimización de código css

  • Css Tidy
  • Clean Css
  • Css Optimiser
  • Flumpcakes Css optimizer
  • cssdrive Css Comperasor
  • W3C Css Validator
Deja un comentario