comparte el articulo 

Consejos para escribir CSS más comprensible – Parte 1

Actualizado el 09/11/2012 < > 0 Comentarios

Resumen: Primera parte de un artículo donde damos algunos consejos que ayudarán a hacer un código CSS más comprensible y fácil de buscar.

Si un día te decides por preguntar a un grupo de desarrolladores web, qué actividad es la que más realiza y a qué dedica más tiempo mientras labora, ellos te dirán que pasan la mayor parte de su horario de trabajo escribiendo código. Sin embargo, si realmente haces un estudio a detalle y te quedas observando lo que los desarrolladores hacen, al pasar de las horas podrás notar que la mayor parte del tiempo lo dedican a entender el código que están utilizando.

Y es que el escribir código nuevo, es en la práctica, la actividad que menos recursos demanda, siendo la comprensión y la modificación del código ya existente lo que más consume la productividad del desarrollador.

Quizás en más de una ocasión te hayas visto en la necesidad de modificar un código ajeno, y al hacerlo pudiste haber notado ciertos factores que te causaron frustración e incluso enojo. En muchas ocasiones, la actividad de entender el código ajeno evoluciona en reescribir dicho código, ya que al leerlo puede llegar a parecer que no tiene sentido y resulta bastante decepcionante tener que trabajar sobre ese mismo código.

Para evitar que futuros desarrolladores del mismo proyecto pasen lo mismo que nosotros, al momento de escribir nuestro código, debemos ser considerados y tratar siempre de dar una estructura que permita al lector comprender rápidamente lo que estamos haciendo. En esta ocasión daremos una serie de consejos que nos ayudarán a aplicar uniformidad a nuestro código CSS.

Existen muchos estilos de codificación, hay a quienes no les gusta utilizar sangría, a otros les gusta manejar varios elementos en una sola línea, pero en busca de una mejor organización, debemos dejar de lado los gustos personales y empezar a buscar una mejor manera de presentar el código. A continuación, daremos algunos consejos básicos para escribir un mejor CSS, que sea comprensible y que no se vea influenciado por un estilo de codificación específico.

Agrega comentarios

Los comentarios son elementos de gran utilidad para comprender gran parte de la funcionalidad del código, en el caso de CSS se pueden utilizar para poder especificar código relacionado a ciertas partes, secciones o páginas del sitio, y de esa manera poder buscarlas de manera más sencilla cuando necesitemos cambiar sus estilos. Con los comentarios, te será mucho más sencillo identificar bloques de código y el proceso de búsqueda se hará más rápido y eficiente.

Si tu manejas un CSS general para todo tu sitio, imagina lo que sería buscar un estilo especifico a través de todas esas sentencias y líneas de código, el tiempo invertido sería demasiado y cuando surja la necesidad de volver a hacer otro cambio es muy probable que tengas que volver a buscar. En cambio, si agrupamos nuestros elementos en base a un tipo o función, y agregamos comentarios en la parte superior de estos, los podemos identificar rápidamente.

Indenta tu código

Otra clave para mantener nuestro código organizado y que luzca de cierta manera limpio, es la indentación. Esta consiste en agregar espacio antes de cada línea de código, dicho espacio ira aumentando dependiendo del nivel al que pertenezca el código.

Esta técnica nos permite leer mejor e identificar elementos de manera más rápida, aunado a esto, hace que el código sea más fácil de modificarse y trabajar con él en un futuro.

Utiliza shorthands

Un shorthand de CSS, consiste en agrupar en una sola línea, todo el código que es utilizado para definir el mismo tipo de característica. De esa manera evitamos tener un montón de líneas extra en nuestro código, dejándolas como innecesarias.

Imagina tener un archivo CSS donde cada elemento tenga siete líneas nada más para definir el borde, otras cuatro para establecer el margen y cinco para el fondo. Esto nos daría como resultado un número de líneas enorme, haciendo que la búsqueda se vuelva más difícil y la organización de nuestro código se pierda, produciend menos limpieza.

Esto se puede evitar utilizando shorthands, con ellos un archivo de 500 líneas puede pasar a ser de 300 sin ningún problema. Por ejemplo, si tenemos que definir el fondo de nuestra página, en vez de hacer esto:

body{
background-image:url('imagen.png');
background-repeat:no-repeat;
background-position:right top;
} 

Podemos hacer esto:

body{
background:#ffffff url('imagen.png') no-repeat right top;
}

Y de esa manera ya nos ahorramos dos líneas de código.

Define una regla por línea

Como ya mencionamos, existen muchos estilos para codificar, el quitar los saltos de línea entre sentencias CSS, es un patrón muy común seguido por muchos desarrolladores. En muchas ocasiones esto se hace para bajar el peso del archivo, aunque realmente no beneficia tanto al desempeño de las peticiones, por lo que es recomendable simplemente utilizar una línea para cada regla y así facilitar la edición.

Al separar cada regla en líneas, estarás ayudando a organizar mejor el código, a optimizar las búsquedas en un futuro y a mejorar el desempeño de los próximos desarrolladores que trabajen en el mismo proyecto.

Trata de utilizar hacks fuera de la hoja normal

Es de todos saber, que Internet Explorer es un navegador que cuenta con bastantes problemas para interpretar ciertas reglas de CSS, por lo mismo existen una serie de hacks hechos por la comunidad de desarrolladores, para solucionar varios de los problemas que se presentan.

Para ello, muchas veces se tiene que jugar con la manera correcta de utilizar las reglas, por lo que es recomendable dejar ese código mal hecho fuera de nuestro archivo general. Puedes hacer uso de archivos CSS especiales para cada versión de Internet Explorer que necesites.

De esta manera no habrá ningún problema si tienes que validar tu hoja de estilo general, además de que el código lucirá más ordenado.

Publicado el 30/10/2012, última actualización 09/11/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras