Maniático del código

10/sep/2008 11

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:

Comentarios

  1. Reymond [#]

    Sin duda es importante comentar el codigo y realizar el indentado.

    Yo personalmente prefiero escribir codigo CSS horizontalmente pero uso indentado y separacion por comentarios.

    Bueno articulo.

  2. James P. Wack [#]

    Notable, no soy el unico que piensa que el código debe verse y entenderse bien.

    Saludos

  3. Pablo [#]

    Orden – orden – orden …. en el código… me he encontrado que cada día que iba aprendiendo más sobre el desarrollar en semántico con HTML y CSS le ganaba más confianza entonces podía mover para haca y para halla….jejej hoy soy casi un maniático y si eso sirve para los buscadores – a los que quieren aprender de tu arte y uno ordenarse dentro de su pega… entonces todo bien.

    Este es un tips que ocupo para encabezar cada hoja, sumado al gran trabajo de Jorge Epuñan con este review:

    /**************************************************************

    Web Site : http://www.ejemplo.cl
    Versión : 1
    Autor : diseñador
    Web Agencia : http://www.ejemplo.cl
    Ultima modificación: d/m/a – hrs.

    **************************************************************/

    Saludos.

  4. Pablo [#]

    ups! parece que me perdí ese capítulo…lo complementaré.

    Salu2.

  5. Denis Osorio C. [#]

    Epuñán, super buen aporte, voy a hacer caso de cada uno de los tips que aquí aconsejas.

    Si lo hago de la manera que sugieres desde un principio -ahora que recién comienzo en serio con CSS- después sin duda tendré hábito de ser ordenado con mis códigos, y resultará totalmente espontáneo. Agradezco los consejos.

  6. holonlabs* [#]

    *

  7. fearlex [#]

    Buen tip, saber comentar es todo un arte 😀 Y no facilita la vida a los programadores de una manera increible 😀

  8. Buzu [#]

    personalmente encuentro el indentado de CSS innecesario. Prefiero usar otras técnicas. Con el tiempo te vas dando cuenta de que es mejor seguir tu propio estilo al programar o estilizar. Por ejemplo, mi HTML y Js está siempre indentado, pero pocas veces comentado. Hay quienes no saben comentar el código. Comentan todo lo que hacen, pero nunca comentan porque lo hacen. El comentario no debe explicar lo que haces, eso se deduce del código. El comentario debe decir por que lo haces.

    Como bien dijo fearlex, saber comentar es un arte.

  9. Mauro [#]

    Yo creo que el uso de comentarios debe reducirse cuanto más se pueda, sustituyéndolos por nombres de identificadores y clases que hablen por sí solos.

  10. Isra [#]

    Yo también escribo CSS “horizontal” (una regla por línea). Separo las clases por categorías (layout, secciones… y dentro de éstas subcategorías como cabecera, navegación, etc), poniendo un título comentado encima de cada una. Pongo las clases genéricas (centro, negrita, rojo…) al final, y separo los “hacks” y versiones especiales (otros navegadores, versión imprimible, móvil, aural) en archivos independientes. Una buena conferencia sobre escribir CSS mantenible: http://www.slideshare.net/nataliedowne/css-systems-presentation?src=embed

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab