15 consejos para trabajar con CSS

Martin Pulido tiene un sitio muy interesante donde hay todo tipo de artículos referidos al diseño web. De allí extraigo dos temas que pueden servir como referencia cuando trabajamos con el CSS de las plantillas.

Aquí va un resumen personal y bastante de las recomendaciones.

1. Separar el CSS, ya sea por por estructura, colores o secciones:

div.contMenu{height:40px; width:300px;} /* estructura */
div.contMenu{border-color:#999999;} /* colores */

2. Agrupar los estilos:

/* layout
----------------------------------------------- */
/* tipografia
----------------------------------------------- */

/* generales */
body{}
h1{}
h2{}
p{}

/* clases */
.clase1{}
.clase2{}

3. Comentar el código. Si hay que cambiar algo todo se hace más fácil.

4. Agrupar propiedades: en lugar de usar varias propiedades, usar la propiedad general.

body{
background: #FFFFFF url(../img/bgImg.gif) no-repeat fixed center center;
}

en lugar de:

body{
background-color: #FFFFFF;
background-image: url(../img/bgImg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}

5. Utilizar mayúsculas al codificar colores. No usar los nombres de los colores (aqua, black, blue, fucshia) ni abreviarlos, usar siempre los 6 caracteres #RRGGBB.

body{color: #CCDDEE;}

6. Usar minúsculas para definir los nombres de las clases.

7. Cerrar todas las declaraciones con punto y coma, aunque sea la úlltima.

8. Usar tabulaciones con una propiedad por línea.

9. Usar selectores descendentes para mantener los estilos agrupados:

#header {}
#header .logo {}
#header .logo img {}

10. No perder de vista los DIV. Añadir un comentario tras las etiquetas de apertura y de cierre que informe de que se trata.

11. Utilizar ID sólo para definir grandes bloques ya que tienen prioridad sobre las clases y por lo tanto bloquean algunas definiciones individuales.

11. Hay que tratar de definir siempre siguiendo un mismo orden, por ejemplo: posición, dimensiones, márgenes, tipografía, fondos y bordes.

12. Nunca declarar en un mismo estilo un ancho o un alto con un padding y/o un borde. IE añade el padding al ancho pero Firefox añade el border al ancho.

13. Primero escribir el HTML y después el CSS.

14. Evitar usar imágenes en el HTML más allá del contenido. Si se quiere hacer un botón con un icono de impresora es mejor crear un estilo con una imagen de fondo.

15. Utiliza colores de fondo, mejor la sensación de carga de la página y asegurara que, aunque no se carguen las imágenes, quedarán definidas las diferentes zonas de contenidos que se quieren marcar en la página.

REFERENCIAS:

Pautas para trabajar con CSS

Algunos consejos cuando uses CSS