A la hora de programar tendríamos que tener en cuenta siempre que nuestro código dentro de 2 meses va a ser tan desconocido para nosotros como para cualquier otra persona. Por ese motivo hemos de plantearnos una rutinas para conseguir hacer el código lo más rehusable posible. Para conseguirlo estos 5 consejos pueden sernos de gran ayuda.
1. Comenta las últimas modificaciones
Es realmente útil añadir al comienzo del fichero un listado las modificaciones realizadas, dependiendo de la embergadura del proyecto sería conveniente indicar más o menos datos como nombre del autor de la modificación, fecha de la misma e incluso motivo.
/*-------------------------------------------------
CSS Document for xyz.com
Last Modified by Michael Heraghty on 04 November 06
---------------------------------------------------*/De esta forma tendremos una idea de todo lo que se ha hecho sobre ese fichero antes de nosotros meter mano, nos ahorraríamos horas hasta descubrir que ya estaba hecho…
2. Indenta el código consistentemente
Esto parece una tontería, pero indentar el código reduce el tiempo de búsqueda de algún elemento concreto entre un 60% y un 80%. Ya que facilita enormemente la visión del conjunto. Esto es tan importante que se suele aplicar a cada lenguaje, y generalmente suele haber una lista de estilos a seguir para que la gente que use ese lenguaje aplique siempre esta indentación.
<html>
<head>
<title>Sample document</title>
</head>
<body>
<div id="intro">
<p> Lorem ipsum dolor sit amet.</p>
</div>
<div id="main">
<ul>
<li>1st list item</li>
<li>2nd list item</li>
</ul>
</div>
</body>
</html>Para código HTML podemos usar HTML Tidy, una herramienta online que te facilita esta labor.
3. Cierra elementos usando comentarios
Generalmente, los elementos de una web son grandes y contienen dentro cantidad de otros elementos que a su vez contienen más, de esta forma llegamos a alcanzar un nivel de tags que puede llevar, y llevan, a confusión. Los tags de apertura, gracias a los atributos podemos diferenciarlos facilmente, pero los tags de cierre son un problema, ya que todos los elementos del mismo tipo de una web se cierran igual. Por ese motivo no es mala idea añadir un comentario al final de cada tag de cierre que pueda dar a lugar de error.
<div id="wrapper">
Lorem ipsum dolor sit amet.
<span class="intro">
Lorem ipsum dolor sit amet.
</span>< !-- .intro -->
</div>< !-- #wrapper -->4. Usa la ruta completa en los selectores CSS
La claridad es la clave del código rehusable y por ese motivo sería recomendable usar siempre (que se pueda) la ruta completa de un elemento en CSS. No siempre será posible usar la ruta completa, ya que a veces tenemos clases que se comportan igual en toda la web y tienen el mismo nombre, para estos casos sería interesante añadirlos en una sección de CSS donde estén todas las globales.
#footer p.credit{
border: 1px solid #000;
}5. Explica tus Hacks
Lamentablemente los hacks son algo muy cotidiano en la programación web, ya que la diferencia entre navegadores es tal que a veces parece que hemos de programar una vez por cada navegador. Para evitar esto siempre añadimos hacks que consiguen que grácias a una línea no tengamos que añadir un CSS nuevo para un navegador enconcreto. Por este motivo es comveniente añadir un comentario para que se vea claro que intentamos solucionar con ese hack.
/* Hides from Firefox all versions/platforms \*/
/* Hides from IE5.x-windows \*/Resumen
La idea básica es que hemos de programar como si el resultado fuera a parar a manos de otra persona, alguien que no tiene ni idea de que va el proyecto y que pueda bastarse con los comentarios y ayudas que dejemos en el código. Por norma general los programadores somos un poco guarretes en este tema y por comodidad, pereza o falta de tiempo siempre dejamos el código como sale, y eso solo nos repercute a nosotros mismos, hemos de poner un poco de orden en él por que sinó nos volveremos locos.
2 comentarios, 1 referencias
+
#