CSSLab

Maniático del código

Tweet

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:

/* ============= #container ============= */
#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 {}
     /* ———— .subnav ———– */
     #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, 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 {
     float: left;
     margin-left: 200px;
     display: inline; /* arregla doble margen en IE6 */
}

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:

/*** SETEOS GENERALES ***/
* {
     margin: 0;
     padding: 0;
}
body {
     font-family: Georgia, serif;
}

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 {
     width: 960px;
     margin: 0 auto;
}

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

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

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 {
          font-family:   Tahoma, Arial, sans-serif;
          font-style:    inherit;
          padding:       0;
          margin:        0;
          color:         #333;
}

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; }
     #header .subnav { float: right; width: 300px; margin: 10px; }
          #header .subnav li { float: left; margin-left: 5px; }

Ó:

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

Links:

• Series Summary: Obsessive CSS Code Formatting