Logotipo de Aprende Gratis.

CSS - Lección 10: La organización del código css

Es muy común, cuando se empieza a desarrollar las primeras hojas de estilo en casada, que empecemos a perdernos entre el código, no pudiendo encontrar una determinada regla para su edición.

Cuando tenemos muy avanzada una web, el código css se hace muy extenso; y si no lo hemos organizado previamente, podemos tener problemas a la hora de encontrar una determinada declaración para cambiar sus valores.

Para solventar este tipo de problemas, podemos seguir una serie de pautas para organizar nuestro trabajo; y para encontrar eficazmente los distintos selectores y declaraciones en un momento determinado. Todo esto nos ahorrará tiempo en el desarrollo de nuestra web, y muchos quebraderos de cabeza.

La primera técnica consiste en utilizar comentarios para nuestro código. Las líneas de comentarios podemos usarlas como referencia para saber porqué hemos escrito determinado código dentro del contexto de nuestra web. Por ejemplo, podemos agregar un comentario al principio de todo el bloque de clases para tablas para identificarlas rápidamente.

Una cosa que hay que tener en cuenta es que es muy importante organizar el código. Las reglas deben estár agrupadas según su selector; esto es que si tenemos varias reglas, por ejemplo, con selector table (normales o clases), debemos agruparlas unas debajo de otras. La imagen 14 muestra lo que se est? pretendiendo explicar:


Figura 14.  Agrupando las reglas según su selector mantendremos
nuestras horas de estilo ordenadas.

En la figura 14 vemos como se puede ordenar las reglas de las hojas de estilo: agrupandolas según el selector. En este caso tenemos tres reglas: la primera con un selector sencillo; y la segunda y tercera cuyo selector son clases. Hay que agrupar las clases juntándolas por familias (table, p, ul...).

Otra cosa aparte es cuando tenemos el desarrollo de la página web muy avanzado. En este caso suele ocurrir que se genera mucho código css; quedando una hoja de estilos largísima. El problema surge cuando tenemos que localizar un determinado selector para editar los valores de sus propiedades.

Una solución muy útil es usar la función de búsqueda de tu editor de texto (notepad en caso de windows). Si, por ejemplo, queremos localizar el selector table.miembros, solo tenemos que acudir a la función búsqueda y poner el valor del atributo class para ese elemento table.


Ir a:


Aprende Gratis 2017 © Mario Raja | página web responsive.