Comunidad de diseño web y desarrollo en internet online

Reglas de codificación y lineamientos de diseño de CSS

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.

Organización de los archivos

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:

  • layout.css: Todo lo relacionado con posicionamiento, esquema del diseño, etc. Exclusivamente.
  • color.css: Colores de fondo e imágenes. En el caso de los background también sus repeticiones. Bordes de elementos, estilos de borde.
  • fuentes.css: Tipo de fuente o tipografía, adornos de fuente (negrita, cursiva, subrayado). Ancho de líneas, espaciado, tamaño de fuente.
  • header.css: TODOS los estilos del header/botonera del diseño.
  • forms.css: TODOS los estilos de formularios y elementos de interacción.

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 del CSS

Orden de escritura.

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:

  1. Etiquetas (Tags de HTML)
  2. Identificadores
  3. Clases
  4. Casos especiales

A su vez, estos los organizaremos en orden alfabético. Ejemplo:

body {}
label{}
span{}

#bate{}

.armageddon {}
.flamas {}
.sangre {}

Comentarios

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;
}

Tabs o Espacios.

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)

Es posible hacerlo en Aptana o Eclipse
Opción de cambiar espacios por tabs en Aptana.

.cosa {
	/* comentario identado con un tab */
}

Nombres de etiquetas, identificadores y clases.

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 {}

Corchetes o llaves. Donde colocarlas

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;
}

Espacios después de signos.

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;
}

Documentación de hacks

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;
}

Optimizaciones de código.

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.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate