La mayoría de las veces, cuando nos encontramos ante un proyecto grande con muchas pantallas por delante puede resultar un poco agobiante. Lo mejor que podemos hacer en esos casos para desarrollar un proyecto web es descomponer las diferentes plantillas.
Desarrollar un proyecto web de tamaño considerable puede resultar abrumador. Evita la frustración atomizando los bloques al máximo
El objetivo al atomizar es llegar a todos los elementos y bloques comunes de cada una de las plantillas. Cuando uno no tiene mucha experiencia y todavía no calcula bien los tiempos, puede que realizar este proceso le parezca innecesario, especialmente porque implica invertir un tiempo aparentemente no productivo. Sin embargo, os aseguro que vale la pena: es tiempo que se ahorra en refactorizar más tarde.
Por si genera dudas, al desarrollar un proyecto web llamamos refactorizar a la reestructuración del código para hacerlo más eficiente sin que esto modifique el comportamiento del mismo. Es decir, hacer lo mismo en menos líneas.
Atomizar no garantiza una estructura definitiva, pero notarás la diferencia
Esta organización y estructuración del proyecto no va a ser definitiva. Seguro que después toca modificar varias cosas en las plantillas, pero os aseguro que serán muchas menos. Que levante las manos del teclado quien no haya tenido que montar un bloque y dos pantallas para darse cuenta después de que ya tenía un bloque muy parecido, con elementos comunes, pero que no es del todo igual como para hacer un copy-paste.
Como veis, sé de lo que os hablo. Esto nos lleva irremediablemente a duplicar estilos, añadir clases extra para determinar ciertas diferencias, etc. y en consecuencia incrementamos el peso de nuestros archivos disminuyendo la eficiencia y la velocidad del sitio.
No obstante, si en lugar de fijarnos en el bloque en sí prestamos atención a los elementos interiores que lo componen, podremos estilar cada uno de ellos. Notaremos como vamos a ir reutilizando clases a lo largo de toda la maqueta ahorrándonos mucho tiempo y con un resultado mucho más optimizado.
Hay varios modelos de desarrollo basados en la atomización. En nuestro caso, no usamos ninguna metodología íntegra, sino un compendio de consejos de diferentes metodologías que hemos ido implementando por necesidad.
Haz la prueba en tu próximo proyecto. Tómate tu tiempo para verlo en detalle, estúdialo y analízalo bloque por bloque y elemento por elemento. Estoy seguro de que notarás el cambio y en adelante no querrás hacerlo de ninguna otra manera.
Las imágenes que ilustran este artículo han sido sacadas de Unsplash.