Al escribir tu código fuente, seguro tienes ya la manera en que acostumbras a hacerlo. Si utilizas uno de los tantos editores de código, seguro confías en lo que te escribe, lo que usualmente es desordenado y lleno de basura. Pero no hay como un código, tanto HTML como CSS y JS limpio, pulcro, ordenado y comentado. Como diría WordPress:

Code Is Poetry

Y realmente lo creo. Un código, además de sostener a tu sitio web, le entrega a los buscadores información muy relevante sobre qué contenidos son más importantes que otros y cómo interpretarlos. Y que se presente de manera ordenada y clara, obviamente facilita la vida a estos queridos spiders que nos interesan mucho que recorran nuestros sitios.

A continuación presentaré algunas formas de escribir y comentar código fuente que he recopilado a lo largo de los días, meses y años en que trabajo en el medio web. Aunque me enfocaré al CSS, son aplicables a cualquier lenguaje de marcado web.

Comentarios⌗

Uso 2 tipos de comentarios según sea la relevancia del elemento dentro de mi estructura.

Si es un id importante (#container, #header, #side, #menu, #footer, etc.) lo marco con el símbolo igual (=) sin indentación, o sea alineado al margen izquierdo:

<span class="commentcss">/* ============= #container ============= */</span><br />
#container {}

Ahora, si es una class pero de las importantes (.submenu, .nav, etc.) la marco con guión (–) e indentado según donde pertenezca la indentación de esa class:

#menu {}<br />
     <span class="commentcss">/* ------------ .subnav ----------- */</span><br />
     #menu .subnav {}

Así queda más fácil recorrer el codigo visualmente en busca de algún elemento que necesitemos modificar y/o agregar.

Otro punto es comentar los [hacks][1], o técnicas para los diferentes browsers (IE6) que no quepan dentro de los comentarios condicionales y que no influyan en el normal comportamiento del estilo con otros browsers:

#side .banners {<br />
     float: left;<br />
     margin-left: 200px;<br />
     display: inline; <span class="commentcss">/* arregla doble margen en IE6 */</span><br />
}

Organizando regiones de código⌗

Una buena técnica es agrupar regiones de código CSS que tengan funciones similares, como por ejemplo:

  • seteos globales (reseter, body)
  • class‘es generales (.izquierda, .derecha, .clear, .centrado, etc.)

Por ejemplo:

<span class="commentcss">/*** SETEOS GENERALES ***/</span><br />
* {<br />
     margin: 0;<br />
     padding: 0;<br />
}<br />
body {<br />
     font-family: Georgia, serif;<br />
}

Indentado⌗

Es lo que menos veo utilizado dentro de códigos, pero es lo que más ayuda al orden y entendimiento de éste. Lo que recomiendo es un indentado básico con la tecla tab:

#container {<br />
     width: 960px;<br />
     margin: 0 auto;<br />
}

Y cuando tenemos selectores que heredan de otros electores, también los indento con tab a medida que se vayan anidando:

#menu {<br />
     float: left;<br />
     border-left: 2px solid gray;<br />
}<br />
     #menu li {<br />
          margin-bottom: 5px;<br />
          font-size: 1.2em;<br />
     }<br />
               #menu a {<br />
                    display: block;<br />
                    color: red;<br />
                    text-decoration: none;<br />
               }<br />
                    #menu a:hover {<br />
                         background: red;<br />
                         color: white;<br />
                    }

Así sabremos con más facilidad cuáles estilos pertenecen o heredan class‘es de otros. Ahora, si eres obsesivo-compulsivo del orden, puedes optar por el siguiente método:

body {<br />
          font-family:   Tahoma, Arial, sans-serif;<br />
          font-style:    inherit;<br />
          padding:       0;<br />
          margin:        0;<br />
          color:         #333;<br />
}

Visualmetne es bastante ordenado, pero te puedes volver loco escribiendo código así.

Ahorrando espacio⌗

Si eres de los que les gusta ahorrar cada kb, puedes escribir el código horizontalmente:

#header { border-bottom: 2px solid gray; margin-bottom: 10px; }<br />
     #header .subnav { float: right; width: 300px; margin: 10px; }<br />
          #header .subnav li { float: left; margin-left: 5px; }

Ó:

#header {<br />
     border-bottom: 2px solid gray; margin-bottom: 10px;<br />
}<br />
     #header .subnav {<br />
          float: right; width: 300px; margin: 10px;<br />
     }<br />
               #header .subnav li {<br />
                    float: left; margin-left: 5px;<br />
               }

[1]: http://www.csslab.cl/category/hacks/ “Enlace en CSSLab a “Categoría: Hacks””