Estos lineamientos o guía de creación de código CSS permiten llevar un trabajo ordenado y mejor productividad tanto en proyectos personales como en equipos de trabajo. Sigue estas pequeñas reglas para tener una mayor organización y lógica en tu proceso de diseño de hojas de estilo.
Para mejorar los cambios de diseño y forma sin afectar otras áreas, dividimos en 5 partes básicas todos nuestros estilos. Teniendo estos archivos:
Además de estos, habrá un archivo que una a todos y sea el único que llamaremos en el HTML. En el caso de Cristalab, el archivo se llama cristalab.css y su código es:
@import url("header.css");
@import url("color.css");
@import url("fuentes.css");
@import url("forms.css");
@import url("layout.css");
Dentro de los archivos CSS podemos colocar estilos para etiquetas, para identificadores, para clases, así como ciertos casos especiales. Colocaremos los estilos en este orden:
A su vez, estos los organizaremos en orden alfabético. Ejemplo:
body {} label{} span{} #bate{} .armageddon {} .flamas {} .sangre {}
En caso de que haya estilos especiales o algún cambio importante dentro del equipo de desarrollo, se colocarán comentarios al principio de esa etiqueta de la siguiente manera. Si el cambio no se quita o modifica, se debe mantener el comentario:
/* Por Freddie. 17 de Agosto del 2006 Hack de lo más c00l para lograr el diseño a dos columnas sin problemas */ .inferior { clear: both; }
En el contenido dentro de corchetes, siempre se identará este contenido con tabs. Cualquier editor decente puede configurarse para poner tabs en vez de espacios en la identación (Dreamweaver, Aptana, Eclipse, etc)
Opción de cambiar espacios por tabs en Aptana.
.cosa { /* comentario identado con un tab */ }
Los nombres de etiqueta son, por supuesto, en minúscula, así como todos los demás nombres. Para los identificadores o clases con más de dos palabras, estas serán separadas con underscore “_”.
Los nombres deben ser descriptivos, es preferible que sean un poco más largos, pero que se entienda con sólo leer el nombre para que sirve:
body {}
#titulo_header {}
.enlace_footer {}
Aunque esto sea motivo de peleas constantes en los equipos de trabajo, lo mejor es seguir el camino que permita mayor claridad en el desarrollo. Para ponerlo en pocas palabras, todos los corchetes van en una línea propia.
.fondo { background: none; } .titulo { color: #0000FF; }
Es algo muy sencillo que puede ayudar de gran manera en la lectura del código. Pon un espacio después de las comas, los signos de dos puntos, etc. Es básicamente escribir código como si se escribiera (bien) en español.
.fondo, .titulo { background: none; color: #05F1F2; }
CUALQUIER hack o cosa rara para hacer funcionar un elemento especifico en el diseño, sea porque no hay otra forma de hacerlo o porque es la mejor manera de que funcione en navegadores como El Maligno, debe documentarse. También, no deben usarse hacks hasta que no se han probado todas las opciones posibles de hacerlo de manera correcta.
.info_comic { /* Esto logra que funcione en IE de manera mística y nos permite ir por cerveza */ line-height:12px ¡important; }
Poner en una sola línea el código de un background o simplificar los colores de la paleta básica no sólo es permitido sino que impulsamos a hacerlo:
.contenedor { /* aquí el color sería el #EEFF33 */ background: #EF3 url(/images/general/fondo.png) repeat-x; }
Con estos sencillos lineamientos de diseño de hojas de estilo CSS, se hace mucho más organizado y efectivo el trabajo en equipo. Pónganlo en practica en sus empresas y proyectos. La mayoría de los lineamientos están basados en reglas de codificación usadas en muchos proyectos libres conocidos, como phpBB. Envíen cualquier pregunta al foro y cualquier sugerencia a nuestro correo.
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros