Image

Dos consejos para escribir un código CSS organizado

Como creador de sitios web ya tengo algunos años de experiencia en los que he colaborado tanto en proyecto pequeños como en proyectos grandes, desde empresas locales hasta nacionales. Cometer errores es parte del proceso de especializarse y aunque cometerlos en muy duro, en ellos se encuentra la oportunidad de hacer mejor las cosas.

Uno de los errores que solemos cometer al momento de desarrollar un sitio es organizar mal tanto el código css como los archivos que integran el proyecto. Quizá ya has pasado por la situación en que debas hacer algún cambio a algunos de los sitios que has desarrollado, dolor de cabeza te llevas si no encuentras con rapidez la porción de código sobre la que debes trabajar. Más allá del dolor de cabeza, sabrás que el tiempo que pierdes buscando entre líneas es mucho y no estamos para desperdiciarlo.

A continuación dejo 2 consejos esenciales para escribir un CSS más organizado y fácil de mantener.

Alfabetización de propiedades

La alfabetización es un método muy práctico para organizar las cosas en la vida diaria y también lo es para el código. En CSS aprovecharemos este método para ordenar las propiedades de un elemento en orden alfabético a-z.

Veamos el siguiente código no alfabetizado:

Ahora veamos el siguiente código alfabetizado:

Como podemos ver, ambos códigos se aplican al mismo elemento y tienen las mismas propiedades y los mismos valores. En pocas palabras, no afectará el resultado que veamos en pantalla. Y es ahí donde está lo importante, como el orden de las propiedades no afecta el resultado, bien podemos empezar a alfabetizar nuestras propiedades en CSS de ahora en adelante.

Bien, quizá este consejo a simple vista parece muy irrelevante, pero créeanme; cuando tienen un cantidad inmensa de elementos y cada uno de ellos tiene varias propiedades, les será muy rápido ubicar la propiedad y/o el valor a modificar.

Secuencia de elementos

Otra aspecto muy importante y que complementa al 100% el consejo anterior es escribir el código CSS de acuerdo a la secuencia del diseño que tenemos ya sea en un documento de Photoshop, Illustrator o cualquier otro. Esta secuencia debería ser de arriba hacia abajo. Veamos el siguiente ejemplo:

Como podemos deducir el código de arriba, estamos viendo el código CSS de un diseño que tiene una cabecera con navegación y enlaces a redes sociales, un contenedor que integra el cuerpo de un artículo y un sidebar con contenido relacionado, además de un footer con algunos links y el copyright del sitio.

Viste que fue muy sencillo comprender de qué se trata el código y ubicar las partes que componen el layout. Esto es gracias a que hemos escrito el código en una secuencia lógica de arriba hacia abajo (del header al footer) y ademas hemos indentado sus respectivos elementos hijos para saber hasta dónde comprende cada bloque principal, en este caso los bloques principales son: header, the-content y footer.

Por último, recuerda hacer comentarios donde sea necesario.

Estos consejos sin duda te serán de utilidad para mejorar tanto el desarrollo como el mantenimiento a tus sitios web.

Obtener las publicaciones de Instagram vía Ajax