Aunque todo profesional del desarrollo Web que se precie debe dominar HTML y CSS, la realidad es que en la mayor parte de los proyectos normalmente hacemos uso de alguna biblioteca o framework CSS , como por ejemplo Bootstrap (que es la más utilizada) o herramientas similares.
Utilizar un framework CSS nos permite maquetar muy rápido , dar un aspecto atractivo por defecto a las aplicaciones, y tener ya hechas muchas cosas complicadas. Pero, por otro lado, utilizar un framework implica que estamos añadiendo gran cantidad de cosas a la aplicación que jamás vamos a utilizar.
Por ejemplo, si creas una aplicación sencilla con Bootstrap utilizando tan solo la facilidad de maquetación con su rejilla (aunque hoy en día con CSS Grid y Flexbox no lo necesitarías) y tomando el aspecto por defecto de botones y cuadros de texto, estarás añadiendo a la aplicación unos 156KB de tamaño con la versión minimizada del CSS de Boostrap. Sin embargo, si analizas el uso real que estás haciendo de las reglas incluidas, verás que es mínimo y te llegaría con un porcentaje pequeño del contenido de ese archivo.
Lo puedes ver en este mini-vídeo en el que tengo una página muy sencilla con unas cuantas secciones para maquetar texto e imágenes, abro la página en Chrome y empleo su herramienta para análisis de cobertura de código:
Como puedes comprobar, casi el 96% del código de la hoja de estilos de Bootstrap no se utiliza para nada. El resto, para esta página en concreto, no lo necesitamos.
Pero claro, hacer esto manualmente es una tarea propensa a errores y, además, lamentablemente las herramientas de cobertura de Chrome no nos dejan exportar a un archivo tan solo lo que se identifica como que está en uso.
En el siguiente vídeo te explico paso a paso cómo puedes sacar partido a la estupenda herramienta PurgeCSS para automatizar el análisis y limpieza de los archivos CSS que emplee tu aplicación web Front-End y acabar con aplicaciones más ligeras y más rápidas. Para ello utiliza un pequeño sitio web con algunas páginas bastante complejas, y que se apoya en el uso de diversas bibliotecas y mucho CSS.
Vamos a verlo:
Todo lo explicado se puede automatizar con npm , Gulp o Webpack e incorporarlo al proceso de desarrollo de tu aplicación.
Puedes aprender a dominar todas estas herramientas de desarrollo Front-End y muchas más, para ser mejor profesional, con nuestro curso de Herramientas modernas para desarrollo Web Front-End empresarial. Háblalo con tu empresa o invierte por tu cuenta en mejorar tu perfil profesional 😉
¡Espero que te resulte útil!
Top comments (0)