JMiur [E]

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
  • 3 comentarios:

    Insomnya  

    Hola JMiur! bueno aquí como siempre leyendo tu blog por gusto y conveniencia (nada mejor que un prof. como vos para instruirnos en este asunto de los códigos) ;)
    Una consulta, sabes? Mi blog al fin se ve más o menos como quiero el asunto es que solo en Firefox con IExplore está fatal. La sidebar se ve muy rara; supongo que tiene que ver con lo que señalas en el punto 12 pero no estoy segura. Mientras que Firefox los títulos de la side se ven "bonitos" con IE quedan feísimos :( ¿qué podra ser? Cuando tengas un tiempito le das una vuelta en unas de esas me tiras un centro pa' solucionarlo. :)
    Un saludo

    Responder
    rowilson  

    las referencias ya no existen

    Responder
    JMiur  

    11 de febreo del 2007 es decir ............... hace más de dos años. Si, claro, pueden no existir. Esto es un blog. Sin embargo, el sitio de Martin Pulido sigue allí.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR