¿Cuántas veces has heredado un proyecto de otra persona, para descubrir que el código es un desastre y no entiendes nada?. Cada uno tiene su manera de escribir código, pero esto tiene serios inconvenientes a la hora de compartir proyectos, puesto que aunque nosotros lo entendamos, puede que nuestro código sea ininteligible para los demás.

En esta serie de artículos, te propondremos unas pautas y buenas prácticas de escritura css, que ayudarán a que tu código sea entendido por otros desarrolladores y por ti mismo. De esta manera evitarás incoherencias y redundancias que agilizarán el desarrollo en equipo y evitarán la duplicación de esfuerzos.

Tener una buena organización es la base de una buena CSS. Documentar el código con comentarios te ayudará a ti y a futuros desarrolladores, a comprender y explorar el CSS más rápidamente. En este primer artículo veremos varias maneras de usar los comentarios para organizar mejor tu código.

Comentarios de organización

Antes de empezar a escribir los estilos, es recomendable definir la organización del documento CSS según las diferentes secciones de la página web que estemos desarrollando. Puedes añadir comentarios indicando donde irán los estilos para cada sección, por ejemplo:

 

/*---Restet---*/
/*---Estilos globales---*/
/*---Cabecera---*/
/*---menu---*/
/*---Contenido principal---*/
/*---Barra lateral---*/
/*---Pie de página---*/

 

En la sección “Estilos globales” pondremos los estilos genéricos, como los de encabezado, párrafos, listas, enlaces, tablas, elementos de formularios ect…

Al mantener estos estilos genéricos en la parte superior de mi archivo CSS, podremos sacar provecho de la cascada.

Aunque pueda parecer excesivo, en sitios web muy grandes, puede resultar útil añadir un segundo nivel de comentarios en cada sección. De esta manera, podríamos subdividir el comentario de estilos globales así:

 

/*---Estilos globales---*/
	/*--Estructura--*/
	/*--Enlaces--*/
	/*--Encabezados--*/
	/*--Formularios--*/

 

El formato utilizado para estos comentarios depende de ti. La clave consiste en definir el formato que prefieras de manera coherente, para que cualquiera pueda usarlo.

Comentarios de Comunicación

Hemos echado un vistazo a los comentarios usados para la organización de la css, pero también se pueden utilizar para comunicar información importante sobre el proyecto a tus compañeros o incluso para a ti mismo, por ejemplo:

 

/*---- TÍTULO: El perfil de la pantalla principal | AUTOR: JLV | Actualización: 03/23/10 por JLV ---- * /

 

La información del título es útil cuando se trabaja con varias hojas de estilo. La información sobre el autor permite a todos los miembros del equipo para saber a quién acudir si tiene alguna pregunta sobre el CSS original, mientras que la información actualizada permite saber cuándo se produjo la última actualización y quien lo hizo. Recuerda que aunque los navegadores no renderizan los comentarios, su contenido se envía junto con el resto de estilos, por lo que no se debe incluir ninguna información sensible o confidencial.

Comentarios de desarrollo y depuración

Hay ocasiones en que te asignan un trabajo que ha empezado un compañero y te preguntas, ¿porque lo ha hecho de esta manera?, o ¿donde esta la clase que necesito?. Los comentarios también pueden ayudar en estas situaciones.

En un comentario puedes indicar que un bloque css no está terminado o que te has trabado y no sabes como terminarlo. De esta manera ahorrarás tiempo y dolores de cabeza a tus compañeros, por ejemplo:

 

/*-- Estilo para los estados del enlace a la espera de nuevos cambios de diseño, por favor no lo edites | JLV 03/23/10--* /
a: link,
a: visited (color: # 0075b2;text-decoration: none;}
a: hover, a: focus, a: active (color: # b3d88c;)

 

Ten en cuenta, que una vez que hayas terminado con el desarrollo, estos comentarios pierden su utilidad y sólo aumentarán el tamaño de tu archivo. Por lo tanto una vez terminado tu proyecto es recomendable eliminarlos.

Clave de color

También podremos utilizar los comentarios para crear una clave de color donde definiremos la paleta de colores para el sitio web. Esto es particularmente útil durante la fase de desarrollo, ahorrando así tiempo de muestreo de colores. ¿Necesitas saber el valor hexadecimal de enlaces azules de nuestra web?, míralo en la clave, solo tendrás que copiar y pegar. Puedes agrupar la clave en una sola línea, o dividirlas en varias líneas. De nuevo, el objetivo es encontrar el formato que mejor se adapte a nuestras necesidades y ser coherente una vez lo hayamos definido:

 

/*--- COLORES: Verde # b3d88c Azul | # 0075b2 | Gris claro # | # eee gris oscuro 9b9e9e | naranja # f26522 | Cerceta # 00a99d | Amarillo # fbc112 --- */
/*--- COLORES
Verde # b3d88c
Azul # 0075b2
Gris claro # eee
9b9e9e gris oscuro #
Naranja # f26522
Cerceta # 00a99d
Amarillo # fbc112
---*/

 

Fuente original (en inglés):msdn.microsoft.com